Jquery validator plugin doesn't check new inputs

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

Rory McCrossan · Accepted Answer · 2011-11-08 10:02:05Z

5

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})
        }); 
    });

answered Nov 8, 2011 at 10:02

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ash Blue Over a year ago

While this is the correct course of action, it isn't working for dynamically added items. You still need to debind and rebind everything.

Chamika Sandamal · Accepted Answer · 2011-11-08 09:58:27Z

1

if you are adding dynamic content any of existing not affecting to the new controls. you have to assign the event again after modifing the dom. so call the validator again afer dom modification.

answered Nov 8, 2011 at 9:58

Chamika Sandamal

24.4k5 gold badges68 silver badges88 bronze badges

Comments

John · Accepted Answer · 2011-11-08 10:19:47Z

1

You have to bind the event again after loading the dynamic content.

if you are adding dynamic content any of existing not affecting to the new controls. you have to assign the event again after modifing the dom. so call the validator again afer dom modification.

If you want to rebind simply call again

 $("#addnew").click(function({ 
      $("#newitems").append('<input class="required" name="newinput">'); 
        });

You can also put it in a function

function rebindit() {
 $("#addnew").click(function({ 
     $("#newitems").append('<input class="required" name="newinput">'); 
    }); 
}

and each time your content changes call rebindit();

edited Nov 8, 2011 at 10:19

answered Nov 8, 2011 at 10:02

John

5572 silver badges6 bronze badges

1 Comment

Ash Blue Over a year ago

Binding a bind will fire it twice, you need to clear the currently bound item first...

allwyn.menezes · Accepted Answer · 2011-11-08 10:04:23Z

0

There is an onchange event in javascript which is triggered when the content of the field changes. You can make use of it on the new field to avail validation for that field as well.

answered Nov 8, 2011 at 10:04

allwyn.menezes

8021 gold badge6 silver badges10 bronze badges

Collectives™ on Stack Overflow

Jquery validator plugin doesn't check new inputs

4 Answers 4

1 Comment

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related