jQuery Validator无效输入字段在成功提交后消失

jQuery Validator invalid input fields disappear after successful submit

本文关键字:成功 提交 消失 字段 Validator 无效 输入 jQuery      更新时间:2023-09-26

保持简短。我有一个表格,设置为在提交后显示无效/不完整的表格。我使用validate.js和form.js。提交不完整的表单后,字段显示为无效(正确)。更正并重新提交成功地处理了表单,但输入字段消失了我已经缩小了问题的范围。它在代码后面。我想我实际上需要帮助

    $(function() {
$('#fltm_register').ajaxForm({
    beforeSubmit: function() {
        $('#fltm_register').validate({    
            errorPlacement: function(error, element) { },
                rules: {
                first_name: {
                    required: true,
                    minlength: 2
                },
                last_name: {
                    required: true,
                    minlength: 2
                },
                email: {
                    required: true,
                    minlength: 4,
                    email: true
                },
                city: {
                    required: true
                },
                state: {
                    required: true
                },
                zip: {
                    required: true,
                    minlength: 4
                },
                country: {
                    required: true
                }
            },
            messages: {
                first_name: {
                    required: "",
                    minlength: ""
                },
                last_name: {
                    required: "",
                    minlength: ""
                },
                email: {
                    required: "",
                    minlength: "",
                    email: ""
                },
                city: {
                    required: ""
                },
                state: {
                    required: ""
                },
                zip: {
                    required: "",
                    minlength: ""
                },
                country: {
                    required: ""
                }
            },
            invalidHandler: function(e, validator) {
                var errors = validator.numberOfInvalids();
                if (errors) {
                    var message = errors == 1
                    ? '<div class="alert alert-block alert-error">You missed 1 field. It has been highlighted below.</div>'
                    : '<div class="alert alert-block alert-error">You missed ' + errors + ' fields.  They have been highlighted below.</div>';
                    $(".form_notifications").html(message);
                    $(".form_notifications").fadeIn();
                }
            },
            errorClass:'control-group error',
            errorElement: 'div.control-group',
            highlight: function (element, errorClass) {
                $(element).parents("div.control-group").addClass(errorClass); 
            }
        });
        return $('#fltm_register').valid();
    },
    success: function(responseText, statusText, xhr, $form) {
        $(".form_notifications").hide();
        $(".form_notifications").html(responseText).hide().fadeIn();
        $("#fltm_register")[0].reset();
    }
    /* unhighlight: function (element, errorClass, validClass) { 
            $(element).parents(".error").removeClass(errorClass); 
    } */
});
});

我已经缩小了这个问题的范围。这与有关

    errorClass:'control-group error',
    errorElement: 'div.control-group',
    highlight: function (element, errorClass) {
        $(element).parents("div.control-group").addClass(errorClass); 
    }

所以我需要下面的代码,但我不知道该把它放在哪里,因为它似乎破坏了AJAX?

    unhighlight: function (element, errorClass, validClass) { 
        $(element).parents(".error").removeClass(errorClass); 
    }
errorClass:'control-group error',
errorElement: 'div.control-group',
highlight: function (element, errorClass) {
    $(element).parents("div.control-group").addClass(errorClass); 
},
unhighlight: function (element, errorClass, validClass) { 
    $(element).parents(".error").removeClass(errorClass); 
}

如果取消高亮显示是已定义的方法,则

highlight: function (element, errorClass) {
    $(element).parents("div.control-group").addClass(errorClass); 
},
unhighlight: function (element, errorClass, validClass) { 
    $(element).parents(errorClass).removeClass(errorClass).addClass(validClass); 
}