Hi, is there a way to choose different containers with the jquery validate plugin for showing the errors in an independent container or a way to create a new container for every error but not just use the same one ?
currently my code looks like this:
$(document).ready(function(){
$("#loginForm").validate({
errorClass: 'errorContainer',
errorElement: 'div',
errorLabelContainer: '#errorContainer',
rules: {
username: { required: true, email: true },
password: { required: true, minlength: 5 }
},
messages: {
username: {
required: 'Please type your username',
email: 'username: type a valid email user@host'
},
password: {
required: 'Please type your password',
minlength: 'password: At least {0} characters required!'
}
}
});
});
and the html looks like:
<form name="loginForm" id="loginForm" method="post" action="/chat">
<div id="errorContainer" class="notification attention png_bg">
</div>
<p>
<label for="username">Username</label>
<input tabindex=1 name="username" class="text-input" type="text"/>
</p>
<div class="clear"></div>
<p>
<label for="password">Password</label>
<input tabindex=2 name="password" class="text-input" type="password" />
</p>
<div class="clear"></div>
<p id="remember-password">
<input type="checkbox" />Remember me
</p>
<div class="clear"></div>
<p>
<input id="submit" class="button" type="submit" value="Sign In" />
</p>
</form>
I would like to call on every error this part of the code.
'<div id="errorContainer" class="notification attention png_bg">
</div>'
so at the end i could get something like:
<div id="errorContainer" class="notification attention png_bg">
<div>error message 1</div>
</div>
<div id="errorContainer" class="notification error png_bg">
<div>error message 2</div>
</div>
Also would like to know how to be available to change the class based on the field for example from:
class="notification attention png_bg to class="notification error png_bg
With this current code i am getting something like:
error message 1 error message 2regards.