jQuery 验证成功时显示空警报

Question

我有一个 form，它需要对 "Agree Terms" checkbox 以及在 spans 中有错误消息的各种字段进行警报验证。当我添加成功功能时（以便在输入有效条目后错误消息将消失），复选框在选中时会提供一个空白 alert ，并且在有效提交时整个表单会发出空白警报。一旦警报被确定，提交就会通过，但我需要摆脱这些虚假警报。我哪里出错了？

javascript 的相关部分在这里

$('#REDcheckout').validate({
errorElement: 'span',
rules: {
    'email': {
        required: false,
        email: true
    },
        'first_name': {
        required: true
    },
        'last_name': {
        required: true
    },
        'member_address1': {
        required: true
    },
        'member_city': {
        required: true
    },
        'member_country': {
        required: true
    },
        'member_post_code': {
        required: true
    },
        'field_terms': {
        required: true
    }
},

messages: {
    email: 'You must enter a valid email address',
    first_name: 'You must enter your First Name',
    last_name: 'You must enter your Last Name (Surname)',
    member_address1: 'Enter your address (this is the delivery address)',
    member_city: 'Please enter your city',
    member_post_code: 'You must enter your Postcode or Zipcode or NA if there is none',
    field_terms: 'You must agree to the RED shop terms and conditions'
},
success: function (label, element) {
    label.parent().removeClass('error');
    label.remove();
},
errorPlacement: function (error, element) {
    if (element.is(':checkbox')) {
        alert(error.text());
    } else { // This is the default behavior
        error.insertAfter(element);
    }
}

});

还有一个jsfiddle here

有什么地方出错了以及如何改正吗？

提前致谢

Answer 1

我认为正确的做法是使用 showErrors() 方法

$('#REDcheckout').validate({
    errorElement: 'span',
    rules: {
        'email': {
            required: true,
            email: true
        },
            'first_name': {
            required: true
        },
            'last_name': {
            required: true
        },
            'member_address1': {
            required: true
        },
            'member_city': {
            required: true
        },
            'member_country': {
            required: true
        },
            'member_post_code': {
            required: true
        },
            'field_terms': {
            required: true
        }
    },

    messages: {
        email: 'You must enter a valid email address',
        first_name: 'You must enter your First Name',
        last_name: 'You must enter your Last Name (Surname)',
        member_address1: 'Enter your address (this is the delivery address)',
        member_city: 'Please enter your city',
        member_post_code: 'You must enter your Postcode or Zipcode or NA if there is none',
        field_terms: 'You must agree to the RED shop terms and conditions'
    },
    success: function (label, element) {
        label.parent().removeClass('error');
        label.remove();
    },
    showErrors: function (errorMap, errorList) {
        if (errorMap.field_terms) {
            alert(errorMap.field_terms)
            delete errorMap.field_terms;
        }
        this.defaultShowErrors();
    }
});

演示：Fiddle

问题是因为您没有将错误元素添加到目标元素，所以在每次验证调用时都会为复选框调用 errorPlacement 方法（无论是否有效），因此当检查输入时会调用 errorPlacement一条空错误消息

errorPlacement: function (error, element) {
    if (element.is(':checkbox')) {
        if (error.text().trim()) {
            alert(error.text());
        }
    } else { // This is the default behavior
        error.insertAfter(element);
    }
}

演示：Fiddle

jQuery 验证成功时显示空警报

jQuery Validate shows empty alert on success

jquery

jquery-validate