Jquery Validation Plugin - Validate Fields Being Added

Question

I need help on jQuery Validation. Basically, I have couple static fields and the validation work fine when I try to submit the form. However, I have a dynamical add/remove field, which I don't know who to capture the elementID and validate it. Lets me explain the problem.

I have 3 static fields Cost, Type, and Region. and this below validation works correctly that those fields.

$("#form1").validate({
    rules: {
        Cost: {
            currency: true
        },

        Type: {
            required: true  
        },

        Region: {
            required: true  
        }

    }
});

Now, I have a button to add (also have remove option by the row) for the textbox, and this adding feature is working fine also.

<input type="button" name="AddIssue" id="AddIssue" value="Add Issue"  class="button2"/>

When the AddIssue button clicked, the following textbox will be added, and the elementID keeps increasing for each textbox is being added as below example.

<input type="text"  id="Issue_1" name="Issue_1" size="5" value="" />
<input type="text"  id="Issue_2" name="Issue_2" size="5" value="" />
<input type="text"  id="Issue_3" name="Issue_3" size="5" value="" />
<input type="text"  id="Issue_4" name="Issue_4" size="5" value="" />

I would like to include in the jQuery validation to go through any elementID like "Issue_", and check to see if the value is NOT blank. How can I do this?

Please help. Thanks!

Answer 1

Add the required class to the new elements:

<input type="text" id="Issue_1" name="Issue_1" size="5" value="" class="required" />

jquery-validate` automatically recognizes class names that match its validation rules and applies them.

Answer 2

Assuming it is JQuery Validate Plugin, I think the below will be the best way to approach it in a manner that allows for the input's to be dynamically generated, and if you wish to apply custom messages, and/or additional options to the rule used.

If you simply want it to be required class="required" will do that as listed in the other answer.

PER THE DOCS

Example: Add a new compound rule called “name”, replacing class=”required” minlength=”2″ with class=”name”.

Current CODE

$("#form1").validate({
    rules: {
        Cost: {
            currency: true
        },

        Type: {
            required: true  
        },

        Region: {
            required: true  
        }

    }
});

ADDED CODE

jQuery.validator.addClassRules("issue", {
  required: true,
  minlength: 2
});

With that in place, we can add a class customer to all customer fields and be done with it:

So your inputs will need to have a class applied like so.

<input type="text"  id="Issue_1" name="Issue_1" size="5" value="" class="issue"/>
<input type="text"  id="Issue_2" name="Issue_2" size="5" value="" class="issue"/>
<input type="text"  id="Issue_3" name="Issue_3" size="5" value="" class="issue"/>
<input type="text"  id="Issue_4" name="Issue_4" size="5" value="" class="issue"/>

Then you can add any input you want with that class and it will validate based on the "issue" ClassRules.

JSFIDDLE