使用 jquery 验证显示错误后的函数

Question

我正在使用 jquery 验证。由于显示的错误，我的设计只有一个小问题。我现在的代码：

 $('#form1').validate({
    rules: {
        txtNaam: { required: true },
        txtVoornaam: { required: true },
        txtDatum: { required: true },
        //rdbMan: { require_from_group: [1, ".optionsRadio"] },
        //rdbVrouw: { require_from_group: [1, ".optionsRadio"] },
        txtINSZ: {
            required: $('cbInxsz').prop('checked')
        },
        txtGeboorteP:{required: $('cbInxsz').prop('checked')},
        txtStraat: { required: $('cbInxsz').prop('checked') },
        txtNr: { required: $('cbInxsz').prop('checked') },
        txtBNummer: { required: $('cbInxsz').prop('checked') },
        txtPost: { required: $('cbInxsz').prop('checked') },
        txtWoonP: { required: $('cbInxsz').prop('checked') }
    },
    messages: {
        txtNaam: {
            required:'Please fill in name'
        }
    },
    submitHandler:function(form){
        checkWidth();
        alert("gg");
    },
    invalidHandler: function (event, validator) { //resize because of the errors that are being displayed
        checkWidth();
},

});

现在的问题是显示错误时我的函数 checkWidth 必须运行。对于 invalidhandler 他不会这样做，因为这是运行ned 在显示错误之前...任何人有任何想法吗？

CheckWidth 函数：

function checkWidth() {
    w = $window.width();

    if (w <= 650) {
        //width smaller then 650 pixels divs above each other and button in the middle
        $('#div1').removeClass('col-xs-6');
        $('#div1').addClass('col-xs-12');
        $('#div2').removeClass('col-xs-6');
        $('#div2').css('height', 'auto');
        $("#divButton").removeClass("text-right");
        $("#divButton").addClass("text-center");
        $('#btnSubmit').addClass("col-xs-6");
        $('#btnSubmit').removeClass("col-xs-2");

    }
    else {
        //bigger => divs next to each other and button in the right corner
        $('#div1').addClass('col-xs-6');
        $('#div1').removeClass('col-xs-12');
        $('#div2').addClass('col-xs-6');
        $("#div2").height($("#div1").height());
        $("#divButton").addClass("text-right");
        $("#divButton").removeClass("text-center");
        $('#btnSubmit').addClass("col-xs-2");
        $('#btnSubmit').removeClass("col-xs-6");

    }


}

Answer 1

当您尝试提交整个表单时，将调用 invalidHandler 函数。尝试将回调函数放在 showErrors:

showErrors:function(errorMap,errorList){
    checkWidth();
    this.defaultShowErrors();     // to display the default error placement
}

从这里得到它 link Invalid handler callback for jquery validation

使用 jquery 验证显示错误后的函数

function after errors are displayed with jquery validation

javascript

jquery

jquery-validate