javascript 选择.js 并验证jquery

Chosen.js and validate jquery

提问by PhilMarc

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

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

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

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

And here is my select form :

这是我的选择表格：

<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>

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

不知道为什么 selected.js 禁用验证，知道吗？

回答by andres descalzo

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

您可以通过将不带属性“ignore”的类“chzn-done”添加到“validate.settings”来解决此问题：

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

example

例子

HTML:

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:

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)';

    });

});

回答by momo

I would just add that for the error placement, it will append the element right next to hidden, therefore you may want to change the placement by using the following code on your validate function as an option argument

我只想为错误位置添加它，它会将元素附加到隐藏旁边，因此您可能希望通过在验证函数上使用以下代码作为选项参数来更改位置

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

    }

回答by Rob Carroll

This will solve not only the issue of not being able to see the validation but it will also apply the standard "input-validation-error"class to the chosen.js styled select.

这不仅将解决无法看到验证的问题，而且还将标准的“input-validation-error”类应用于 selected.js 样式的选择。

There are two cases where it needs to be applied both when the form is submitted and on a select change. See the three sections of code below.

有两种情况需要在提交表单和选择更改时应用它。请参阅下面的三段代码。

1. The first sets the form validation to validate hidden elements.
2. The second checks the chosen validation on submit.
3. The third checks the chosen validation on a change.

1. 第一个设置表单验证以验证隐藏元素。
2. 第二个检查提交时选择的验证。
3. 第三个检查所选的更改验证。

Sets up the form validation to show hidden:

设置表单验证以显示隐藏：

var validator = $("#FormID").data('validator');
validator.settings.ignore = ":hidden:not(select)";

Checks on form submit:

表单提交检查：

$('#FormID').on('submit', function () {
    var ChosenDropDowns = $('.chzn-done');
    ChosenDropDowns.each(function (index) {
        var ID = $(this).attr("id");
        if (!$(this).valid()) 
        {
            $("#" + ID + "_chzn a").addClass("input-validation-error");
        }
        else 
        {
            $("#" + ID + "_chzn a").removeClass("input-validation-error");
        }
    });
});

Checks on select change:

检查选择更改：

$(".chzn-select").chosen().change(function () {
    var ID = $(this).attr("id");
    if (!$(this).valid()) {
        $("#" + ID + "_chzn a").addClass("input-validation-error");
    }
    else {
        $("#" + ID + "_chzn a").removeClass("input-validation-error");
    }
});

回答by user2449231

There is also an issue of validating the chosen select menus afterthe form has been submitted. If you have a validation error on the menu then change the menu to be valid the validation error will not go away. The form can still be submitted, but it's not obvious given that there is a validation error showing.

还有一个问题是在提交表单后验证所选的选择菜单。如果菜单上有验证错误，则将菜单更改为有效验证错误不会消失。表单仍然可以提交，但鉴于显示验证错误，这并不明显。

Here's one example to fix it using the invalidHandlerand valid().

这是使用invalidHandlerand修复它的一个示例valid()。

// We'll use this flag so we don't have to validate fields before
// the form has been submitted.
var validatingForm = false;

// This line before validate() is called allows
// chosen menus to be validated
$.validator.setDefaults({ ignore: ":hidden:not(select)" });

$("#yourForm").validate({
    invalidHandler: function() {
        // Now we can validate the fields onChange
        validateForm = true;
    },
        rules: {
            // Probably your validation rules here
        }
    });

//  Now set an onChange event for the chosen menu
$("yourChosenMenu").change(function(){

    // Check that we've tried to submit the form
    if(validateForm) {
        // We tried to submit the form, re-validate on change
        $("yourChosenMenu").valid();
    }
});