如何使用jQuery验证与“选择”插件？如何使用jQuery验证与“选择”插件？(How can I

我有一些<select>使用输入选择的插件 ，我想验证为在客户端“必需的”。 因为“选择”隐藏实际选择元素并创建的div和跨越部件，原生HTML5验证似乎并没有正常工作。 表单不会提交（这是好的），但没有显示错误信息，因此用户不知道什么是错的（这是不好的）。

我已经转向了jQuery验证插件（我计划使用最终反正），但还没有任何运气至今。 这里是我的测试案例 ：

<form>
    <label>Name: <input name="test1" required></label>
    <label>Favorite Color:
        <select name="test2" required>
            <option value=""></option>
            <option value="red">Red</option>
            <option value="blue">Blue</option>
            <option value="green">Green</option>
        </select>
    </label>
    <input type="submit">
</form>

$(document).ready(function(){
    $('select').chosen();
    $('form').validate();
});

这让select一个空值通过，而无需验证或显示错误信息。 当我注释掉chosen()行，它工作正常。

我怎样才能验证chosen()与jQuery验证插件的输入，并显示为无效问卷，错误信息？

Answer 1:

jQuery验证忽略隐藏的元素，而既然选择插件添加visibility:hidden属性选择，请尝试：

$.validator.setDefaults({ ignore: ":hidden:not(select)" }) //for all select

要么

$.validator.setDefaults({ ignore: ":hidden:not(.chosen-select)" }) //for all select having class .chosen-select

加入这一行之前validate()函数。 这对我来说可以。

Answer 2:

jQuery验证是不会拿起被隐藏的元素，但可以迫使它来验证单个元素。 一个黑客一点，但下面的工作：

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

只选择“选择”的元素，你可以使用$('.chzn-done')

Answer 3:

在我的。

我的表单有类“验证”和每一个输入元素是class“需要”的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>

和JavaScript代码choosen与jQuery验证

$(document).ready(function() {
    // - validation
    if($('.validate').length > 0){
        $('.validate').validate({
            errorPlacement:function(error, element){
                    element.parents('.controls').append(error);
            },
            highlight: function(label) {
                $(label).closest('.control-group').removeClass('error success').addClass('error');
            },
            success: function(label) {
                label.addClass('valid').closest('.control-group').removeClass('error success').addClass('success');
            },
            //validate choosen select (select with search)
            ignore: ":hidden:not(select)"
        });
    }
    // - chosen, add the text if no result matched
    if($('.cho').length > 0){
        $(".cho").chosen({no_results_text: "No results matched"});
    }
});

注意：如果输入值为空，类错误将被追加到父“格”

Answer 4:

//你可以用另一种方式来隐藏自己的选择元素解决这个问题。 例如....

$(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;

    });
});

Answer 5:

你也可以运行到选的下拉列表之前会显示该错误信息的麻烦。 我找到了解决方案来解决这个问题，在这里我粘贴代码，与大家分享

HTML：

<label class="col-sm-3">Select sponsor level *</label>
<asp:DropDownList ID="ddlSponsorLevel" runat="server" CssClass="col-sm-4 required" ClientIDmode="Static" />
<label class="error" id="ddlSponsorLevel-error" for="ddlSponsorLevel"></label>

使用Javascript：

if (!$('#ddlSponsorLevel').valid()) {
       $('#ddlSponsorLevel-error').text("You must choose a sponsor level");
            return false;
}

jQuery验证实际添加一个隐藏的标签html元素。 我们可以重新定义在不同的地方用相同的ID这个元素来覆盖原来的地方。

Answer 6:

我花了大约一天的时间这方面的工作，并在所有没有运气！ 然后我看着好vtiger使用的源代码，并发现了金子！ 虽然他们使用旧版本他们的关键！ 你必须使用

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

如果你不这样做，你拥有它，其中的类都是通过类选择通过被应用到选定的，它认为你的选择永远不会被更新。 如果你不类传递到所选择的这应该是一个问题，但如果你这样做，这只是它的工作方式。

这与选择1.4.2 validationEngine 2.6.2和2.1.4的jquery

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

Answer 7:

这个简单的CSS规则适用于的Joomla 3的实施选择

选上的添加类无效的隐藏的选择输入所以用这个目标所选择的选择框

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

Answer 8:

我只好就地$.validator.setDefaults({ ignore: ":hidden:not(.chosen-select)" })
外面$(document).ready(function()以便与chosen.js工作。

https://stackoverflow.com/a/10063394/4063622

Answer 9:

@Anupal把我在正确的道路上，但不知何故，我需要一个复杂的修复

启用.chosen要考虑

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>

JavaScript的

再次，对于全球配置$.validator对象。 接下来可以把以前的命令

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

Answer 10:

jQuery("#formID").validationEngine({
     prettySelect : true,
     useSuffix: "_chzn"
});

jQuery的验证-引擎/ demoChosenLibrary

Answer 11:

你也可以试试这个：

$('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-chosen对每个类别select秒。

$('.select-chosen').valid()用于强制隐藏验证select小号

http://jsfiddle.net/mrZF5/39/

Answer 12:

我的形式包括有条件地隐藏字段，以防止验证失败我已经延长了默认忽略隐藏选择的领域：隐藏远一点：

 $.validator.setDefaults({ ignore: ":hidden:not(.chosen-select + .chosen-container:visible)" //for all select having class .chosen-select }) 

Answer 13:

我觉得这是更好的解决方案。

//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...
});

注意：您还需要改变errorPlacement回调处理显示错误。 如果您的错误信息旁边的领域，你将需要使用.siblings('.errorMessageClassHere')取决于DOM或其他方式）来代替.next('.errorMessageClassHere')

Answer 14:

在2018年，我验证了jQuery验证抱怨没有名称的输入字段。 该输入字段由jQuery的拣选plguin追加。

使用选择时，此错误是别的之前发生的事情。

Answer 15:

感谢这个答案https://stackoverflow.com/a/40310699/4700162我解决iussue：

该文件的Chosen.jquery.js，将里面

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

有了这个：

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

Answer 16:

你可以使用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());
            }
        }
    });

文章来源: How can I use jQuery validation with the “chosen” plugin?