Question

Hi I use jQuery validator for one form.
It was working nice until today. I added a new code to the form which adds/remove additional fields to the form (with set classes to “required”)..

basic the form is some thing like >

    <form name="form" id="form">
    <input name="text1" class="required">
    <a id="addnew">Add new text</a>
<div id="newitems"></div>
    <submit>
    </form>

The code I use is

<script type="text/javascript">
        $(document).ready(function({ $("#form").validate(); 
        $("#addnew").click(function({ 
        $("#newitems").append('<input class="required" name="newinput">'); 
}); });  
</script>

The idea is that when someone click on the Add new text inside the form is added a new field. My problem is that then the Validator doesn’t work on the new field because its already loaded for the form.. How I can set the javascript to check and the new fields?

I haven’t copy the exact code of my site because its very long..

This Is the validation plugin – its the most used validator on jquery

Answer 1

Upon creation of your new form element, you need to inform the validation plugin to check it by adding a rule. Adding the ‘required’ class to an element only alerts the plugin if the element is present on document load. Try this:

   $(document).ready(function({ 
        $("#form").validate(); 
        $("#addnew").click(function({ 
            var input = $("<input />").attr("name", "newinput");
            $("#newitems").append(input);
            input.rules('add', {'required': true})
        }); 
    });