Jquery验证器onfocusout对复选框和单选不起作用

jquery validator onfocusout not working for checkbox and radio

本文关键字：单选 不起作用 复选框 验证 onfocusout Jquery      更新时间：2023-09-26

使用jquery验证器。当使用TAB键导航表单时，不执行验证。

小提琴来了

$(function () {
         var validator = $("#myForm").validate({ 
             onfocusout: function(element) {
                   this.element(element);
                },
             rules: { 
                 fname: "required", 
                 check: "required",
                 color: "required"
                }, 
             messages: { 
                 fname: "Enter your firstname", 
                 check: "you know you do",
                 color: "pick one!",
             }, 
         }); 
     });

我尝试在复选框上执行on blur。但是，该事件是在表单加载时触发的。这是改进后的小提琴

$('#check').on('blur', function() {
            $("#myForm").validate().element( this );
        }).blur();

解决onfocusout问题的方法是对复选框和单选框都使用on模糊。

$(function () {
    var validator = $("#myForm").validate({ 
        onfocusout: function(element) {
            this.element(element);
    },
    rules: { 
        fname: "required", 
        check: "required",
        radio: "required",
        color: "required"
    }, 
    messages: { 
        fname: "Enter your firstname", 
        check: "check your checkbox",
        radio: "check your radio",
        color: "pick one!",
    }, 
    }); 
    $('#check').on('blur', function() {
        $("#myForm").validate().element( this );
    });
    $('#radio').on('blur', function() {
        $("#myForm").validate().element( this );
    });
});

注意不要像这样调用blur函数:

$('#check').on('blur', function() {
    $("#myForm").validate().element( this );
}).blur();

初始模糊函数将导致验证在加载

时触发

这里是工作小提琴

onfocusout不会显示错误消息，否则验证元素在blur上的最佳方法是;

onfocusout: function(element) { 
    if( $(element).attr('name') ) { 
            this.element(element);  
    }
}

检查onfocusout选项

"Validate elements (except checkboxes/radio buttons) on blur. If nothing is entered, all rules are skipped, except when the field was already marked as invalid."

验证

相关文章：