Javascript question
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?
The HTML I'm using
Original HTML
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: "[COLOR="Yellow"]label[/COLOR]",
wrapper: "[COLOR="Yellow"]td[/COLOR]",
errorPlacement: function(error, element) {
error.insertBefore( element.parent().parent() );
error.wrap("[COLOR="Yellow"]<tr class='error'></tr>[/COLOR]");
$([COLOR="Yellow"]"<td></td>[/COLOR]").insertBefore(error);
},
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.
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>
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>
Comment