JQuery dynamic validation
Hi I am trying to do a few things with the jQuery validation plugin and it seems stuck in one place.
Here's some code:
<script type="text/javascript">
$(document).ready(function(){
$('#myform').validate();
$('#email').rules('add', {required: true, messages: {required: 'email is required'}} );
$('#phone').rules('add', {required: true, messages: {required: 'phone is required'}} );
$('#validate').click(function(){
$('#result').text($('#myform').validate().form());
return false;
});
});
</script>
<form id="myform">
<div>email:<input type="text" id="email" /></div>
<div>phone:<input type="text" id="phone" /></div>
<div id="result"></div>
<input id="valdate" type="image" src="images/submit.png" />
</form>
As a result, I am getting the wrong error message. If I click the submit button, "phone required" is displayed next to the email address and "email required" is not displayed at all.
What's wrong with this code?
a source to share
You might consider something like below. It's a bit clearer to read and debug. Since you are using standard rules such as "required", you do not need to provide a message unless you want something else. Rules and messages are identified by the name of the input field (for example, by email).
The parameter errorPlacement
specifies the location of the messages. You don't need to enable this parameter; by default, a message is added to the input field. But if you have div layouts, or need a special position for a radio camera message, or what you have, this is the place to do it.
$(document).ready(function(){
$('#myform').validate({
rules:{
email: "required",
phone: {required:true, minlength:7}
},
messages:{ //not required as default message for "required" rule makes same text
email: "email is required",
phone: "phone is required",
},
errorPlacement: function(error, element) { //this is where to put positioning rules
error.appendTo(element.parent()); //just an example
}
});
});
a source to share
Next approach:
<script type="text/javascript">
$(function(){
$('#myform').validate({
rules: {
phone: 'required',
email: 'required'
},
messages: {
phone: 'phone is required',
email: 'email is required'
}
});
});
</script>
together with adding an attribute name
for each input field works great.
a source to share
Try adding rules first and then call $ ('# myform'). validate ()
It won't work. First you need to call the validation method.
Using the naming convention
I know I can do this using the names as you mentioned above. But unfortunately I will have to use IDs.
Contentwill not be permanent. It depends on some rules. So I end up with a different page almost every time. There will be many controls with different IDs. many review groups, etc.
So using the "names" approach just doesn't fit my requirements.
Any thoughts on how to use the $ (selector) .rules ('add') approach
PS I found the following example http://www.coldfusionjedi.com/index.cfm/2009/2/22/Using-jQuery-to-add-form-fields--with-validation and it works pretty well and in the code is nothing special.
a source to share