发表新帖
发表新帖

How can I use jQuery validation with the “chosen” plugin?

后端 未结
关注
18 2135
夕颜
夕颜 2020-11-28 05:45

I have some

提交评论
  •  加载中...
  • 暖寄归人
    2020-11-28 06:01

    My form includes conditionally hidden fields, to prevent the hidden chosen fields failing validation I've extended the default ignore:hidden a little further:

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

    0 讨论(0)
  • 粉色の甜心
    2020-11-28 06:01

    I think this is the better solution.

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

    Note: You will also need to change the errorPlacement callback to handle displaying the error. If your error message is next to the field, you will need to use .siblings('.errorMessageClassHere') (or other ways depending on the DOM) instead of .next('.errorMessageClassHere').

    0 讨论(0)
  • -上瘾入骨i
    2020-11-28 06:03

    jQuery validate ignores the hidden element, and since the Chosen plugin adds visibility:hidden attribute to the select, try:

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

    OR

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

    Add this line just before validate() function. It works fine for me.

    0 讨论(0)
  • 北恋
    2020-11-28 06:06

    Thanks this answer https://stackoverflow.com/a/40310699/4700162 i resolve the iussue:

    Inside the file the Chosen.jquery.js, change

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

    with this: 

    this.form_field_jq.css('position', 'absolute').css('opacity', 0).after(this.container);
    0 讨论(0)
  • 温柔的废话
    2020-11-28 06:07

    @Anupal put me on the right path but somehow I needed a complex fix

    Enable .chosen to be considered

    javascript

    $.validator.setDefaults({ ignore: ":hidden:not(.chosen)" })

    Or any other name you give to your chosen's. This is global configuration. Consider setting on top level

    Create custom rule for chosen

    Thanks to BenG

    html

    <select id="field" name="field" class="chosen" data-rule-chosen-required="true">
    <option value="">Please select…</option>
</select>

    javascript

    Again, global configuration for $.validator object. Can be put next to the previous command

    $.validator.addMethod('chosen-required', function (value, element, requiredValue) {
    return requiredValue == false || element.value != '';
}, $.validator.messages.required);
    0 讨论(0)
    • 上一页 1 2 3 下一页
     看不清?
    提交回复
    热议问题