Chosen.js并验证jquery

Question

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

这是JS我正在使用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>

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

Answer 1

您可以通过添加"chzn-done"类来解决此问题,该类不将属性"ignore"添加到"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)';

    });

});

Answer 2

我只想补充一点,对于错误放置,它会将元素附加到隐藏的旁边,因此您可能希望通过在验证函数上使用以下代码作为选项参数来更改放置

errorPlacement: function(error,element) {
        if (element.is(":hidden")) {
            //console.log(element.next().parent());
            element.next().parent().append(error);
        }
        else {
            error.insertAfter(element);
        }

    }