jQuery验证克隆元素

Question

I am using the following JQuery validation:

http://bassistance.de/jquery-plugins/jquery-plugin-validation/

I have the following element:

<div class="form-item">
  <label for="Reference_name" class="required">Name: <span class="required">*</span></label>                        
   <input name="Reference[name][]" class="form-input validate {validate:{required:true,minLength:2,messages:{required:'Your name is required',minLength:'Your name is too short'}}}" id="Reference_name" type="text">                                        
</div>

I have cloned the element but the validation is only appearing on the first element. I would like it to validate against the second too and show the error message label.

Can someone help with this please.

Answer 1

elements must be unique

<label for="Reference_name" class="required">Name:<span class="required">*</span></label>            
<input type="text" id="Reference_name" name="Reference[Name]" id="Reference_name" required="required" maxlength="255" />

File Js

$(document).ready(function() {
 validate_form();
});     


function validate_form() {
    $("#id_of_your_form").validate({
    rules: {
        'Reference_name': {
            required:true,
            minlength: 2,                
            }
        },
    },
    messages: {
        'Reference_name': {
            required:"Your name is required",
            minLength:'Your name is too short'
        },           
    }

});
}

if you want to compare two fields http://docs.jquery.com/Plugins/Validation/Methods/equalTo#other

Answer 2

Put your validation function in a global variable like this:

var validate_form_function = function(){
                if($(".app-form").length > 0){
                  $('.app-form').validate({
                    rules: {
                            comment_message: {
                                required: true,
                                minlength: 2
                            }
                    },

                    messages: {
                            comment_message: {
                                required: "Your message",
                                minlength: "Your message"
                            }
                    }
                  });
                }
            };

Then revalidate your cloned form with the function like this : validate_form_function();