Chosen.js并验证jquery [英] Chosen.js and validate jquery

问题描述

我正在使用validate.jquery.js：工作正常。
但是当我添加selected.js时，选择下拉列表的验证不再有效。

I am using validate.jquery.js : works fine. But when I'm adding chosen.js , validation on the select dropdowns doesn't work anymore.

这是我正在使用的JS http://pastebin.com/S9AaxdEN

Here is the JS I'm using http://pastebin.com/S9AaxdEN

这是我的选择表格：

<select name="category" id="category" placeholder="" class="{validate:{required:true}}">
<option value=""><?php echo lang('category_choice'); ?></option>
<option value="vtt">VTT</option>
<option value="autre">Autre type de v&eacute;lo</option>
</select>

不知道为什么selected.js禁用验证，任何想法？

Don't know why chosen.js disable the validation, any idea ?

推荐答案

您可以通过添加chzn-done类来解决这个问题，该类不将属性ignore改为validate.settings：

You can fix this by adding the class "chzn-done" that does not take the property "ignore" to "validate.settings":

var settings = $.data($('#myform')[0], 'validator').settings;
settings.ignore += ':not(.chzn-done)';

示例

HTML：

<form method="post" id="form1" action="">
    <fieldset>
        <legend>Login Form</legend>
        <div>
            <label>datos</label>
            <select name="data-select" title="data-select is required" class="chzn-select {required:true}" style="width:150px;">
                <option></option>
                <option value="1">uno</option>
                <option value="2">dos</option>
            </select>
        </div>
        <div>
            <label for="phone">Phone</label>
            <input id="phone" name="phone" class="some styles {required:true,number:true, rangelength:[2,8]}" />
        </div>
        <div>
            <label for="email">Email</label>
            <input id="email" name="email" class="{required:true,email:true}">
        </div>

        <div class="error"></div>
        <div>
            <input type="submit" value="enviar datos"/>
        </div>
    </fieldset>
</form>

JS：

$(function() {

    var $form = $("#form1");

    $(".chzn-select").chosen({no_results_text: "No results matched"});
    $form.validate({
        errorLabelContainer: $("#form1 div.error"),
        wrapper: 'div',
    });

    var settings = $.data($form[0], 'validator').settings;
    settings.ignore += ':not(.chzn-done)';

    $('form').each(function(i, el){

        var settings = $.data(this, 'validator').settings;
        settings.ignore += ':not(.chzn-done)';

    });

});

这篇关于Chosen.js并验证jquery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！