我如何将jQuery验证与"；“选择”；插件？

我有一些使用的

输入，我想在客户端验证为“必需”。由于“selected”隐藏了实际的select元素并创建了一个带有div和span的小部件，因此原生HTML5验证似乎无法正常工作。表单不会提交（这是好的），但是错误消息不会显示，因此用户不知道哪里出了问题（这是不好的）

我转向了jQuery验证插件（我计划最终使用它），但到目前为止没有任何运气。这是我的：

这是让

选择

通过一个空值，而不验证或显示错误消息。当我注释掉

selected（）

行时，它工作正常

---

如何使用jQuery验证插件验证

selected（）

输入，并显示无效输入的错误消息？

jQuery验证不会拾取隐藏的元素，但可以强制它验证单个元素。有点像黑客，但以下方法可以奏效：

$('form').on('submit', function(e) {
    if(!$('[name="test2"]').valid()) {
        e.preventDefault();
    }
});  

---

要仅选择“选定”元素，您可以使用

$（'.chzn done'）

//您可以使用另一种方法隐藏选定的元素来解决此问题。例如

$(document).ready(function() {
 $.validator.addMethod(     //adding a method to validate select box//
            "chosen",
            function(value, element) {
                return (value == null ? false : (value.length == 0 ? false : true))
            },
            "please select an option"//custom message
            );

    $("form").validate({
        rules: {
            test2: {
                chosen: true
            }
        }
    });
    $("[name='test2']").css("position", "absolute").css("z-index",   "-9999").chosen().show();

    //validation.....
    $("form").submit(function()
    {
        if ($(this).valid())
        {alert("valid");
    //some code here 
        }
        return false;

    });
});

---

jQuery validate忽略隐藏元素，由于所选插件向select添加了

visibility:hidden

属性，请尝试：

$.validator.setDefaults（{ignore:：hidden:not（select）}）//对于所有选择

或

$.validator.setDefaults（{ignore:：hidden:not（.select）}）//对于所有具有类的select。select

---

在

validate（）函数前面添加这一行。这对我来说很好。
我认为这是更好的解决方案

//trigger validation onchange
$('select').on('change', function() {
    $(this).valid();
});

$('form').validate({
    ignore: ':hidden', //still ignore Chosen selects
    submitHandler: function(form) { //all the fields except Chosen selects have already passed validation, so we manually validate the Chosen selects here            
        var $selects = $(form).find('select'),
            valid = true;
        if ($selects.length) {
            //validate selects
            $selects.each(function() {
                if (!$(this).valid()) {
                    valid = false;
                }
            });
        }
        //only submit the form if all fields have passed validation
        if (valid) {
            form.submit();
        }
    },
    invalidHandler: function(event, validator) { //one or more fields have failed validation, but the Chosen selects have not been validated yet
        var $selects = $(this).find('select');     
        if ($selects.length) {
            validator.showErrors(); //when manually validating elements, all the errors in the non-select fields disappear for some reason

            //validate selects
            $selects.each(function(index){
                validator.element(this);
            })
         }
    },
    //other options...
});

$('.chosen').chosen({
        allow_single_deselect: true
    });
    $.validator.setDefaults({ ignore: ":hidden:not(select)" });
        $('form').validate({
            highlight: function(element) {
                $(element).closest('.form-group').addClass('has-error');
        },
        unhighlight: function(element) {
            $(element).closest('.form-group').removeClass('has-error');
        },
        errorElement: 'span',
        errorClass: 'help-block text-danger',
        errorPlacement: function(error, element) {
            if(element.parent('.input-group').length) {
                error.insertAfter(element.parent());
            } else {
                error.insertAfter(element.parent());
            }
        }
    });

注意：您还需要更改
errorPlacement
回调以处理显示错误。如果错误消息位于字段旁边，则需要使用
.sides（'.errorMessageClassHere'）
（或其他方式，具体取决于DOM），而不是
.next（'.errorMessageClassHere'）

在我的矿井里

我的表单有“验证”类
每个输入元素都有“required”类
html代码：

<form id="ProdukProdukTambahForm" class="validate form-horizontal" accept-charset="utf-8" method="post" enctype="multipart/form-data" action="/produk-review/produk/produkTambah" novalidate="novalidate">
     <div class="control-group">
        <label class="control-label" for="sku">SKU</label>
        <div class="controls">
           <input id="sku" class="required span6" type="text" name="sku">
        </div>
     </div>
     <div class="control-group">
        <label for="supplier" class="control-label">Supplier</label>
        <div class="controls">
            <select name="supplier" id="supplier" class='cho span6 {required:true} '>                                           
                <option value=''>-- PILIH --</option>
                <?php
                foreach ($result as $res)
                    {
                    echo '<option value="'.$res['tbl_suppliers']['kode_supplier'].'">'.$res['tbl_suppliers']['nama_supplier'].'</option>';
                    }
                ?>
            </select>
         </div>
      </div>
</form>

注:
如果输入值为null，则类错误将附加到父级“div”
您也可以尝试以下操作：

$('form').on('submit', function(event) {
    event.preventDefault();
    if($('form').valid() == true && $('.select-chosen').valid() == true){
        console.log("Valid form");
    } else {
        console.log("Invalid form");
    }
}); 

记住添加
。在每个
选择
上选择所选的
类

$（'.select selected'）.valid（）
强制验证隐藏的
select
s

您也可能会遇到问题，因为在选择dropdownlist之前会显示错误消息。我找到了解决此问题的解决方案，并将我的代码粘贴到此处与您共享

HTML:

Jquery验证实际上添加了一个隐藏的标签html元素。我们可以在不同的位置用相同的ID重新定义此元素，以覆盖原始位置。
我花了大约一天的时间来处理此问题，但一点运气都没有！然后我查看了Vtiger使用的源代码，发现了gold！即使他们使用的是旧版本，他们也有钥匙！你必须使用

data-validation-engine="validate[required]"

如果你没有，并且你有它，在那里类被传递给select的类被应用到select，它认为你所选择的永远不会被更新。如果您不将类传递给所选的对象，这应该是一个问题，但如果您这样做，这是唯一可行的方法

这是选择的1.4.2 validationEngine 2.6.2和jquery 2.1.4

// binds form submission and fields to the validation engine
jQuery("#FORMNAME").validationEngine({
    prettySelect : true,
    useSuffix: "_chosen"
    //promptPosition : "bottomLeft"
});

这个简单的CSS规则适用于Joomla3的Selected的实现

Selected会将无效类添加到隐藏的选择输入中，因此使用该选项以选定的选择框为目标

.invalid, .invalid + div.chzn-container a {
    border-color: red !important;
}

我的表单包含条件隐藏字段，为了防止隐藏的选定字段无法通过验证，我将默认的“忽略：隐藏”进一步扩展：


$.validator.setDefaults（{
忽略：“：hidden:not（.selected select+。selected container:visible）”//对于所有具有类的select。selected select
})
我必须放置
$.validator.setDefaults（{ignore:：hidden:not（.select）}）


外部
$（document）.ready（function（））
以便使用selected.js

@Anupal让我走上了正确的道路，但不知何故，我需要一个复杂的解决方案

启用要考虑的
。选择的

javascript

$.validator.setDefaults({ ignore: ":hidden:not(.chosen)" })

或者你给你选择的人起的任何其他名字。这是全局配置。考虑设置在顶级

为所选对象创建自定义规则
多亏了

html

<select id="field" name="field" class="chosen" data-rule-chosen-required="true">
    <option value="">Please select…</option>
</select>

在2018年，我验证jQuery validate是否抱怨输入字段没有名称。此输入字段由jQuery选择的plguin追加


使用Selected时，此错误发生在任何其他错误之前。
感谢此答案，我解决了问题：

在文件selected.jquery.js中，更改

this.form_field_jq.hide().after(this.container);

为此：

this.form_field_jq.css('position', 'absolute').css('opacity', 0).after(this.container);

您可以使用jQuery验证“所选”插件。为我工作很好

$('.chosen').chosen({
        allow_single_deselect: true
    });
    $.validator.setDefaults({ ignore: ":hidden:not(select)" });
        $('form').validate({
            highlight: function(element) {
                $(element).closest('.form-group').addClass('has-error');
        },
        unhighlight: function(element) {
            $(element).closest('.form-group').removeClass('has-error');
        },
        errorElement: 'span',
        errorClass: 'help-block text-danger',
        errorPlacement: function(error, element) {
            if(element.parent('.input-group').length) {
                error.insertAfter(element.parent());
            } else {
                error.insertAfter(element.parent());
            }
        }
    });

调用selected（）后，使用以下jquery方法

$（“#id”）.css（“显示”：”）.addClass（“仅限sr”）

sr only是引导类
我通过执行以下操作来解决它：

这是为v1.8.7选择的：

打开selected.js并在第199行找到：
this.form\u field\u jq.hide（）。在（this.container）之后，

将其替换为：
this.form\u field\u jq.addClass（'selected-master'）。在（this.container）之后，

将以下CSS属性添加到该类：
参考资料：
退房。这不是一个真正的解决方案，但您可能想尝试一下。@elclanrs：谢谢，但我现在想继续使用事实上的jQuery验证库，尤其是在项目的这一点上（试图总结）。也许在未来的项目中。这篇文章解决了我的问题：简单而优雅。似乎根本不需要
e.preventDefault（）
，只需调用
$（“元素”）.valid（）
。我使用了，它似乎工作得很好：
$（'form'
$.validator.setDefaults({ ignore: ":hidden:not(.chosen)" })

<select id="field" name="field" class="chosen" data-rule-chosen-required="true">
    <option value="">Please select…</option>
</select>

$.validator.addMethod('chosen-required', function (value, element, requiredValue) {
    return requiredValue == false || element.value != '';
}, $.validator.messages.required);

this.form_field_jq.hide().after(this.container);

this.form_field_jq.css('position', 'absolute').css('opacity', 0).after(this.container);

$('.chosen').chosen({
        allow_single_deselect: true
    });
    $.validator.setDefaults({ ignore: ":hidden:not(select)" });
        $('form').validate({
            highlight: function(element) {
                $(element).closest('.form-group').addClass('has-error');
        },
        unhighlight: function(element) {
            $(element).closest('.form-group').removeClass('has-error');
        },
        errorElement: 'span',
        errorClass: 'help-block text-danger',
        errorPlacement: function(error, element) {
            if(element.parent('.input-group').length) {
                error.insertAfter(element.parent());
            } else {
                error.insertAfter(element.parent());
            }
        }
    });

.chosen-master {
  display: inline-block !important;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
}