jQuery dynamic validation

Question

Hi there Im trying to do a few things with jQuery validation plugin and seems stuck on one place.

Here is 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 keep getting a wrong error message. If i click on submit button 'phone is required' is shown near email input and 'email is required' isnt shown at all.

Whats wrong with this code ?

Answer 1

The following approach:

<script type="text/javascript">
    $(function(){
        $('#myform').validate({
            rules: {
                phone: 'required',
                email: 'required'
            },
            messages: {
                phone: 'phone is required',
                email: 'email is required'
            }
        });
    });
</script>

along with adding name attribute to each input fields, works perfectly.

Answer 2

You might consider something like the below. It's a bit clearer to read and debug. Since you are using standard rules like "required", you don't have to specify a message unless you want something different. The rules and messages are identified by the name of the input field (e.g. email).

The errorPlacement option is where you specify the location of the messages. You don't have to include this option; the default is to append the message to the input field. But if you have layout divs or need special position for message on radio boxes, or what have you, 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
      }
   });
});

Answer 3

Try adding the rules first and then calling $('#myform').validate()

It will not work. You have to call validate method first.

Using input names approach

I know i can do it using names as you mentioned above. But unfortunately i will have to use ids.

content will not be constant. It will vary depending on some rules. So as a result almost each time i will have a different page. There are will be many controls with different ids. many validation groups etc.

So using "names approach" just doesnt meet my requirements.

Any thoughts how to use $(selector).rules('add') approach??

P.S. I've found following example http://www.coldfusionjedi.com/index.cfm/2009/2/22/Using-jQuery-to-add-form-fields--with-validation and it works pretty nice and there is nothing special in code.

Answer 4

OK It seems like I've found the problem.

You HAVE to add NAME attribute to elements anyway. In my example if you add appropriate names to input elements it will work nice.