I have a form I am working on and my validation JavaScript (jQuery & jQuery validate plugin) works, up to a point. I've set up a jsfiddle to show it in it's working state: http://jsfiddle.net/5Ukv2/
However, when I use the errorPlacement function/parameter, it breaks. The errors go where I specified, but multiple errors get added any time I update the input (ie, any keystroke), and when the entry is valid according to the JavaScript, the errors don't get removed from my HTML: http://jsfiddle.net/5Ukv2/1/
Also, the validation starts happening as soon as I type into the input field; that issue is minor in comparison to the extra and unremoved error elements.
What am I doing wrong?
Code attached below for reference as well as in the jsfiddles. I commented a couple methods because they're making ajax calls that won't work here, but the validation acts the same.
HTML:
<form action="email_submit.php" method="post" name="enterForm" id="enterForm">
<label for="email">Enter your email to play:
<input type="text" name="email" id="email" value="" />
<input type="submit" value="Enter" name="submit" class="submit" />
</form>
JavaScript:
// JavaScript Document
$(function(){
$("#enterForm").validate({
rules: {
email: {
email: true,
required: true,
remote: {url:"email_valid.php", async:false}
}
},
messages:{
email:{
email: "Please enter a valid email address",
required: "Please enter an email address",
remote: "That is not a valid domain"
}
},
submitHandler: function(form) {
var formData = $('form').serialize();
$.ajax({
type: 'POST',
url: "email_submit.php",
data: formData,
success: function(data){
if(data.subscriber && data.valid_email)
window.location = "calendar.html";
else if( !data.valid_email)
alert("Please enter a valid email");
else if( !data.subscriber)
alert("Open sign up form");
},
error: function(data){
alert("e:" + data);
console.log(data);
},
dataType: "JSON"
});
return false;
},
errorPlacement: function (error, element){
if( element.attr("name") == "email" ){
error.insertAfter("#enterForm");
}
else
error.insertAfter(element);
}
});
});
It looks like the validator plugin expects the errors to be placed somewhere within the form element. When it's looking for the "error" elements to hide or show, it must be restricting the search to the current form. This allows you to have multiple forms on the page, and changes in one form won't affect the others.
Arguably, this is probably a bug in the plugin. Here's a modification of your form that works (see fiddle)
<form action="email_submit.php" method="post" name="enterForm" id="enterForm">
<label for="email">Enter your email to play:</label>
<input type="text" name="email" id="email" value="" />
<input type="submit" value="Enter" name="submit" class="submit" />
<div id="error_container"></div>
</form>
$(function(){
$("#enterForm").validate({
rules: {
email: {
email: true,
required: true/*,
remote: {url:"email_valid.php", async:false}*/
}
},
messages:{
email:{
email: "Please enter a valid email address",
required: "Please enter an email address"/*,
remote: "That is not a valid domain"*/
}
},
submitHandler: function(form) {
var formData = $('form').serialize();
$.ajax({
type: 'POST',
url: "email_submit.php",
data: formData,
success: function(data){
if(data.subscriber && data.valid_email)
window.location = "calendar.html";
else if( !data.valid_email)
alert("Please enter a valid email");
else if( !data.subscriber)
alert("Open sign up form");
},
error: function(data){
alert("e:" + data);
console.log(data);
},
dataType: "JSON"
});
return false;
}, //uncomment this errorPlacement method
errorPlacement: function (error, element){
if( element.attr("name") == "email" ){
error.insertAfter("#error_container");
}
else
error.insertAfter(element);
}
});
});