CODEWITHSUNDEEP
jqueryformsjquery-validateplaceholder
Ricardo Alves
Ricardo Alves

Reputation: 561

Jquery Validation messages as a placeholder not clearing as you type

I've got this mobile form which I am using jQuery Validation and so far I have managed to made it work with the .error element as a placeholder, the problem is that it keeps giving error messages within the placement and therefor does not want to add the .valid class if I type it actually does work with the Email and Password fields!

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

Upvotes: 2

Views: 4424

Answers (1)

T J
T J

Reputation: 43166

You are currently setting the error message as the actual value of the element. Setting it as the placeholder will remove it once you click the element, and the plugin automatically removes the error class when validation succeeds.

Change errorPlacement to:

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

Upvotes: 2

Related Questions