jQuery Validate: Retaining error after validation

Question

I have a simple login form and have jQuery validate replacing the field labels when there's an error to display. The problem is that, once the error is cleared, the label disappears. I would like to find a way to revert back to the previous label's content, or rebuild that label when the field is valid...

Here's my code:

$(document).ready(function(){
    $("#login").validate({
        errorPlacement: function(error, element) {
            element.prev().replaceWith(error);
        },
        rules: {
            "email": {
                required: true,
                email:true,
            },
            "password": {
                required: true,
                minlength: 6
            }
        },
        messages: {
            email: {
                required: "Please enter your email address.",
                email: "Please enter a <u>valid</u> email address"
            },
            password: {
                required: "Please enter your password.",
                minlength: "Please enter a password with 6 characters or more."
            }
        },
    });
});

And the HTML:

<form name="login" id="login" method="post" action="authenticate.php">
<p>
    <label for="email">Email Address:</label>
    <input type="text" name="email" id="email" class="required email" />
</p>
<p>
    <label for="password">Password:</label>
    <input type="password" name="password" id="password" class="required" />
</p>
<p>
    <input type="submit" value="Log In" id="submit" />
</p>

In essence, when the user submits the form, if there's no data in the Email field, then the label for email gets replaced with the error. But once it has valid input, I want to put back the original label.

Thanks in advance for any suggestions,

Z

Answer 1

I actually worked out a compromise whereby, instead of replacing the previous label with the error label, I'm appending a span into that label using error.appendTo(element.prev()) and errorElement: "span". Here's the new code:

            $(document).ready(function(){
            $("#login").validate({
                errorElement: "span",
                errorPlacement: function(error, element) {
                    error.appendTo(element.prev());
                    //element.prev().replaceWith(error);
                },
                rules: {
                    "email": {
                        required: true,
                        email:true,
                    },
                    "password": {
                        required: true,
                        minlength: 6
                    }
                },
                messages: {
                    email: {
                        required: " is Required",
                        email: " is Improperly Formatted"
                    },
                    password: {
                        required: " is Required",
                        minlength: " is not Long Enough"
                    }
                },
            });
        });

It's less than ideal, but at least when the span appears, the error code is where I want it to be, and when it disappears, the label remains intact. I just made it so the label and the error complete each other like sentences... Eg, "Email Address" " is required." or "Email Address" " is not properly formatted."

Thanks to everybody that contributed here,

Z

Answer 2

You can remove

errorPlacement: function(error, element) {
         element.prev().replaceWith(error);
     }, 

and the messages should appear beside the textboxes instead.