javascript validation for dynamic element

Question

How can I validate dynamically created text inputs?

I have an "add more" link that creates new ones, and a link to remove them. Each one has a uniqe ID.

Also, at least two text boxes must be filled.

score 6 · Answer 1 · answered Feb 02 '10 at 14:49

Using the Validation plugin you could add rules dynamically. Here's an example:

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Test</title>
    <script type="text/javascript" src="jquery-1.4.1.js"></script>
    <script type="text/javascript" src="jquery.validate.js"></script>
    <script type="text/javascript">
    var count = 0;
    $(function() {
        $('form').validate({
            rules: {
                input0: {
                    required: true
                }
            },
            message: {
                input0: {
                    required: 'This field is required'
                }
            }
        });

        $('a').click(function() {
            count++;
            var newElement = $('<input type="text" name="input' + count + '" value="" />');
            $('form').append(newElement);
            newElement.rules('add', {
                required: true,
                messages: {
                    required: 'This field is required'
                }
            });

            return false;
        });
    });
    </script>
</head>
<body>
    <form>
        <input type="text" name="input0" value="" />
        <input type="submit" value="OK" />
    </form>

    <a href="#">Add input</a>
</body>
</html>

@tvanfosson, good point. I guess calling `elementToBeRemoved.rules('remove')` should do the job. — Darin Dimitrov, Feb 02 '10 at 18:07
The snippet is really what i expected, but if my guess is correct, u just validate input field ID (input0) , but i dont know id name , bcoz my id is dynamic, also am having element remove option , it is not possible to guess the exactl id name, but class is unique, is it possible to validate using id.. — Bharanikumar, Feb 03 '10 at 07:59

score 3 · Accepted Answer · edited May 23 '17 at 12:01

I wrote a blog post explaining how to dynamically add inputs to a form, and simultaneously add validation rules for the jQuery Validate plugin.

In my example, it was an order form for helmets:

//Each set of helmet inputs gets unique IDs
function newHelmetInputs(i){
var inputSet = ''; 
inputSet += '<label for="helmet'+ i +'color">Helmet '+ i +' Color</label>'
inputSet += '<input id="helmet'+ i +'color" name="helmet['+ i +'][color]"/>'
inputSet += '<label for="helmet'+ i +'size">Helmet '+ i +' Size</label>'
inputSet += '<input id="helmet'+ i +'size" name="helmet['+ i +'][size]"/>'
return inputSet;
}

//Actually adding them to the page
$('#addhelmet').click(function(){
var i = nextNumber(); //nextNumber() is a closure - see my blog for details
var newInputs = newHelmetInputs(i); //i is used above in IDs
$(this).before(newInputs);
('#helmet' + i + 'size').rules('add', {digits: true}); //matching validation rule
});

The blog post goes into more detail, and also explains how to process this with PHP.

As for the requirement that at least two textboxes must be filled, I wrote a jQuery Validate method for that, and a similar one that says "either fill at least X of the fields in this section, or skip the section entirely."

So, for example, if your form lets people order sandwiches, and each sandwich has an input for bread and filling, you can dynamically add fields for as many sandwiches as they want to order. They don't have to fill in anything for sandwich #2, but if they do, they have to give you both the bread AND the filling type.

i already have the script for add more fields, i need only validation, my element ID and Name are dynamic , is there any possiblity to do validation with class — Bharanikumar, Feb 02 '10 at 15:02
You should be able to add a rule to jQuery Validate using a class selector. Like: $(".someclass").rules("add", {minlength: 2}); — Nathan Long, Feb 02 '10 at 15:17
Darin's example shows how rules are set up initially for this plugin. — Nathan Long, Feb 02 '10 at 21:55

score 0 · Answer 3 · answered Feb 02 '10 at 14:39

0

A simple way to do it is to count the number of non-empty textboxes on submit.

 $(function()) {
      $('form').submit( function() {
           if ($(this).find('input:text')
                      .filter( function() { return $(this).val() != ''; }) < 2) {
               ... display validation errors...
               return false;
           }
           return true;
      });
 }):

answered Feb 02 '10 at 14:39

tvanfosson

524,688
99
697
795

hi , my textfield class name is js_txt, tell me how to valiate field with above script... – Bharanikumar Feb 02 '10 at 16:11
This is doing manual validation. When the form is submitted it counts the number of text inputs that have a value. If there are more than two that have values then it validates. If there are fewer than two boxes with values it would run the code you insert to show the validation errors and return false, stopping the submission. – tvanfosson Feb 02 '10 at 17:48

javascript validation for dynamic element

3 Answers3

Linked