Jquery 验证消息作为占位符在您键入时不会清除

Question

我已经有了这个移动表单，我正在使用 jQuery 验证，到目前为止，我已经设法使其与 .error 元素作为占位符一起工作，问题是它不断在放置中给出错误消息，因此确实如果我输入它实际上确实适用于电子邮件和密码字段，则不想添加 .valid 类!

Here is the fiddle.

JS

$(document).ready(function() {

    $("#ValidateOrderRegistration").validate({

            rules: {
                FirstName: {
                    required: true,
                    minlength: 1
                },
                LastName: {
                    required: true,
                    minlength: 1
                },
                Username: {
                    required: true,
                    minlength: 2
                },
                Password: {
                    required: true,
                    minlength: 6
                },
                PasswordConfirm: {
                    required: true,
                    minlength: 6,
                    equalTo: "#f-password"
                },
                EmailAddress: {
                    required: true,
                    email: true
                },
            },

            messages: {   
                FirstName: {
                    required: "Please enter your First Name",
                    minlength: "Please enter at least 2 characters",
                },
                LastName: {
                    required: "Please enter your surname",
                    minlength: "Please enter at least 2 characters",
                },
                Password: {
                    required: "Enter a 6 or more digits password",
                    minlength: "At least 6 characters"
                },
                PasswordConfirm: {
                    required: "Confirm Password Password",
                    minlength: "Your password must be at least 6 characters"
                },
                EmailAddress: {
                    required: "Enter an Email",
                    email: "Not Valid"
                },
            },

            errorPlacement: function(error, element) {
                element.val(error[0].outerText);     
            }, //Puts errors as placeholders

        }) //add rules
    $(this).find("input[type=text]").each(function() {
            if ($(this).attr("placeholder") == $(this).val())
                $(this).val("");
        }) //validate everything
    $('.cat_textbox').on('click focusin', function() {
        this.value = '';
    }); //cleans fields
    $('#EmailAddress').on('click', function() {
        $('#EmailAddress .error').removeClass('error');
        $(this).addClass('success');
    }); //I tried this!
    $("#EmailAddress").click(function(e) {
        var email = $("#EmailAddress");
        var emailaddressVal = $("#EmailAddress").val();
        var emailReg = /^[A-Z0-9._%+-]+@([A-Z0-9-]+\.)+[A-Z]{2,4}$/i;


        if (!emailReg.test(email.val())) {
            email.addClass("error").focus();

        } else {

            email.removeClass("error");
        } //
        return false;
    });
}); //MAIN VALIDATION

Answer 1

您当前正在将错误消息设置为元素的实际值。将其设置为占位符将在您单击该元素后将其删除，并且插件会在验证成功时自动删除错误类。

将 errorPlacement 更改为:

errorPlacement: function (error, element) {
    element.attr("placeholder", error[0].outerText);
}