Question

要保持简短。我有一个表单，设置为在提交后显示无效/不完整的表单。我正在使用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); 
    }

Answer 1

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

Answer 2

如果unhighlight是定义的方法，

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

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

2 个答案: