Trying to implement a contact form into a site but having some issues.
Original programmer used tables, which I removed and changed a few things. When I submit the form without entering anything, the errors come up, and every time the focus is changed on a field, the error pops up again and I end up with multiple errors coming up down the page.
Is there a way to change the JS below to fit with my layout and so it doesn't repeat itself ten million times?
Code:
$(function() {
// Validate the contact form
$('#contactform').validate({
// Specify what the errors should look like
// when they are dynamically added to the form
errorElement: "label",
wrapper: "td",
errorPlacement: function(error, element) {
error.insertBefore( element.parent().parent() );
error.wrap("<tr class='error'></tr>");
$("<td></td>").insertBefore(error);
},
Quote:
errorElement: What element the error message will be placed in. The reason I chose to put it in a label is so that if the user clicks on the error, it will automatically focus the correct text box for them.
wrapper: Basically like errorElement ? it wraps the error, including the label, in a td tag.
errorPlacement: A function that specifies where the error should be placed after it is generated. It looks complicated, but really all we are doing is putting it in a tr element next to the tr that the input box is in, and adding an empty td tag before the error to push the error to the right. You?ll see what I mean if you take a look at the code of the page after an error is generated.
|
The HTML I'm using
Code:
<div class="wrap" align="center">
<form id="contactform" action="contact/processForm.php" method="post">
<input name="name" type="text" id="name" value="Your Name" onFocus="this.value=''; this.onfocus=null;" />
<br />
<input name="email" type="text" id="email" value="Your Email" onFocus="this.value=''; this.onfocus=null;" />
<br />
<textarea id="message" name="message" rows="5" cols="22" onFocus="this.value=''; this.onfocus=null;">Enter a brief message</textarea>
<br />
<div align="right"><br />
<input type="submit" value="Submit Message" id="send" /></div>
</form>
<div id="response"></div>
</div>
Original HTML
Code:
<table>
<tr>
<td><label for="name">Name:</label></td>
<td><input type="text" id="name" name="name" /></td>
</tr>
<tr>
<td><label for="email">Email:</label></td>
<td><input type="text" id="email" name="email" /></td>
</tr>
<tr>
<td><label for="message">Message:</label></td>
<td><textarea id="message" name="message" rows="5" cols="20"></textarea></td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="Send!" id="send" /></td>
</tr>
</table>