jquery form validation - toggle error text question
I believe what I am wanting to do is simple, but I'm missing something and hoping someone here can point out my issue.
What I want to do is have descriptive text (label) become hidden when an error occurs and have the error message show in the place of the descriptive text. When the input field is corrected, I want the error message to go away and be replaced with the original descriptive text. Toggle seems like the logical candidate, but I seem to be missing something with error functionality in jquery validation.
sample html snippet:
- <div class="required">
<label class="title">To:</label>
<div class="formgroup">
<input type="text" name="sName" value="" class="required" />
<label id="toName">- Student Name</label>
</div>
</div>
- <div class="formgroup">
<input type="text" name="sEmail" id="sEmail" value="" class="required" />
<label id="toEmail">- Student Email</label>
</div>
- ......(other code in here)
- </div>
jquery snippet:
- errorPlacement: function(error, element) {
if (element.attr("name") == "sEmail") {
$("label#toEmail").toggle(false);
}
- if (element.attr("name") == "sName") {
$("label#toName").toggle(false);
}
This hides the descriptive text nicely and displays the error message, but once the input becomes valid the original descriptive text doesn't reappear.
Any ideas on how to accomplish what I'm trying to do?
Thanks.