In my form I am using jquery form validate plugin to validate a form. But the problem is that error messages are displaying multiple times below every field. As you see on the screen shot below.
This is working correctly in Chrome, but not in Firefox.
.
I found this error is occurring when I am using field name="id"
<input name="id" class=""/>
The following code I am using
$('document').ready(function(){
$("#form").validate({
rules : {
"id":{
required:true,
digits:true
},
"user_login":{
required:true
},
"user_pass":{
required:true
}
},
messages: {
"id":{
required: "This field is required"
},
"user_login":{
required: "This field is required"
},
"user_pass":{
required: "This field is required"
}
},
submitHandler: function(form){
var formData = $('#form').serialize();
$('#form').unbind("submit"); // fix for IE
$.ajax({
url: "",
data:formData,
type:"POST",
error: function(error){
},
success: function(data) {
}
});
return false;
});
});
How can I avoid appending multiple error messages per field.
Edit: My HTML code is
<form id="form" name="" method="POST" action="">
<ul class="formstyle">
<li>
<label>Id</label>
<input type="text" name="id" class="" />
</li>
<li>
<label>User Login</label>
<input type="text" name="user_login" class="" />
</li>
<li>
<label>User Pass</label>
<input type="text" name="user_pass" class="" />
</li>
<li>
<input type="submit"/>
</li>
</ul>
</form>
I got this done working.
I am using jQuery version: v1.4.3 (not working)
The jQuery version validation plug in working with: v1.6.4 (working)