Chosen.js 并验证 jquery

Posted 2023-05-07

【中文标题】Chosen.js 并验证 jquery

【英文标题】：Chosen.js and validate jquery

【发布时间】：2012-05-10 09:08:48

【问题描述】：

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

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

【问题讨论】：

我找到了一个可能的答案，如果您有同样的问题，它会有所帮助：Make sure the validator doesn't ignore :hidden elements. The original `` is hidden when chosen applies its drop-down to the DOM.

我认为，如果您将自己找到的解决方案发布为答案，而不是接受它，这样问题就会在搜索页面中显示为已回答并已接受。

我试过了，但由于我是新用户，我还没有被信任，很遗憾做不到:(

【参考方案1】：

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

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

example

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

    );

);

【讨论】：

请检查***.com/questions/20950610/…

是的，它现在可以工作，但仍然存在一些问题。我会在我的问题上发布相同的内容。感谢您的检查！

【参考方案2】：

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

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

    

【参考方案3】：

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

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

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

将表单验证设置为隐藏：

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

检查表单提交：

$('#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");
        
    );
);

检查选择更改：

$(".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");
    
);

【讨论】：

为什么不利用插件的内置回调函数/选项？第一个函数可以是onsubmit 回调选项的一部分，第二个函数可以是highlight 和unhighlight 回调选项的一部分。见：docs.jquery.com/Plugins/Validation/validate#toptions

【参考方案4】：

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

这是使用invalidHandler 和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();
    
);