jQuery Validation: Validate dynamicly generated fields only on the first field

Question

Yes, I know this question has been asked a few times before. But I am confused with the answers. I thought I would have to somehow 'refresh' or use live to add the validation each time I add a new input field.

Also I checked out the demo and I think I am missing something. I don't really see any code that adds validation each time a new field gets added.

This is a simplified version of my code:

$(function(){
  $('#testform').validate();

  var input1 = $('<input type="text" class="required" />'):
  var input2 = $('<input type="text" class="required" />'):
  var input3 = $('<input type="text" class="required" />'):

  $('#testform').append(input1)
                .append(input2)
                .append(input3);
});

My html looks something like this:

<form id='testform'>
    <input type='submit' value='submit' />
</form>

For some reason validation only works on the first element. If you fill in text it works on the onblur event. But the form will submit once the first input field has text.

Actually I think just found the answer while typing this but I'll add this question anyway in case others run into the same problem. If this is a problem I'll remove it right away.

Just a side note, type="test" isn't a valid <input> element :) — Nick Craver
– Nick Craver, Commented Jul 24, 2010 at 13:52

Pickels · Accepted Answer · 2010-07-24 14:03:40Z

4

For the jQuery validation to work you need to add the name attribute.

So it should be:

$(function(){
  $('#testform').validate();

  var input1 = $('<input name="one" type="test" class="required" />'):
  var input2 = $('<input name="two" type="test" class="required" />'):
  var input3 = $('<input name="thr" type="test" class="required" />'):

  $('#testform').append(input1)
                .append(input2)
                .append(input3);
});

On the jQuery validation page:

The name attribute is required for input elements, the validation plugin doesn't work without it. Usually name and id attributes should have the same value.

http://docs.jquery.com/Plugins/Validation/Reference

answered Jul 24, 2010 at 14:03

Pickels

34.7k26 gold badges121 silver badges181 bronze badges

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

Comments

Josh Pennington · Accepted Answer · 2010-07-24 14:02:42Z

1

The first thing I would do is assign a name and ID to each of your text elements and see if that makes a difference.

Also I think you have to put your $('#testform').validate(); inside a $().ready(function() { } block. This forces jQuery to not start the form validation until the page is ready (and completely rendered by the browser)

answered Jul 24, 2010 at 14:02

Josh Pennington

6,42813 gold badges63 silver badges96 bronze badges

Collectives™ on Stack Overflow

jQuery Validation: Validate dynamicly generated fields only on the first field

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related