Jquery Validation for Dynamically Created Fields

Question

I have basic javascript code to generate input text areas as below

$("#btnAdd").click(function (e) {
        var itemIndex = $("#container input.iHidden").length;
        e.preventDefault();
        var newItem = $("<span class='badge badge-success'>" + itemIndex + "</span> <input id='Interests_" + itemIndex + "__Id' type='hidden' value='' class='iHidden'  name='Interests[" + itemIndex + "].Id' /><input type='text' id='InvoiceNumber_" + itemIndex + "__InvoiceNumber' placeholder='Fatura Numarası' name='[" + itemIndex + "].InvoiceNumber'/>    <input type='text' id='Interests_" + itemIndex + "__InterestText' placeholder='Fatura Tutarı(TL)' name='[" + itemIndex + "].Amount'/> <br /><br />");
        $("#container").append(newItem);
    });

And i have a form for this dynamic fields. I am using jquery validator for this form for other elements. Now i also want to validate this dynamicly created fields.

For static fields here my working validation scripts.

  $('#frm_register').validate({

        focusInvalid: false,
        ignore: "",
        rules: {
            FirstName: {
                required: true
            } ....

And here sample of my dynamic fields.

<input type="text" id="InvoiceNumber_0__InvoiceNumber" placeholder="Fatura Numarası" name="[0].InvoiceNumber">
<input type="text" id="Interests_0__InterestText" placeholder="Fatura Tutarı(TL)" name="[0].Amount"> 
<input type="text" id="InvoiceNumber_1__InvoiceNumber" placeholder="Fatura Numarası" name="[1].InvoiceNumber">
<input type="text" id="Interests_1__InterestText" placeholder="Fatura Tutarı(TL)" name="[1].Amount">

Sparky · Accepted Answer · 2014-03-09 20:41:18Z

3

You could use the .rules('add') method immediately after the new input element is created...

$("#btnAdd").click(function (e) {
    var itemIndex = $("#container input.iHidden").length;
    e.preventDefault();
    var newItem = $("<span class='badge badge-success'>" + itemIndex + "</span> <input id='Interests_" + itemIndex + "__Id' type='hidden' value='' class='iHidden'  name='Interests[" + itemIndex + "].Id' /><input type='text' id='InvoiceNumber_" + itemIndex + "__InvoiceNumber' placeholder='Fatura Numarası' name='[" + itemIndex + "].InvoiceNumber'/>    <input type='text' id='Interests_" + itemIndex + "__InterestText' placeholder='Fatura Tutarı(TL)' name='[" + itemIndex + "].Amount'/> <br /><br />");
    $("#container").append(newItem);

    // add the rules to your new item
    $('Interests_' + itemIndex + '__Id').rules('add', {
        // declare your rules here
        required: true
    });
});

Alternatively, for a simple rule like required, you could just add the required="required" attribute to the new element when you create it...

$("#btnAdd").click(function (e) {
    var itemIndex = $("#container input.iHidden").length;
    e.preventDefault();
    var newItem = $("<span class='badge badge-success'>" + itemIndex + "</span> <input id='Interests_" + itemIndex + "__Id' type='hidden' value='' class='iHidden'  name='Interests[" + itemIndex + "].Id' /><input type='text' id='InvoiceNumber_" + itemIndex + "__InvoiceNumber' placeholder='Fatura Numarası' name='[" + itemIndex + "].InvoiceNumber'/>    <input type='text' id='Interests_" + itemIndex + "__InterestText' placeholder='Fatura Tutarı(TL)' name='[" + itemIndex + "].Amount' required='required' /> <br /><br />");
    $("#container").append(newItem);
});

answered Mar 9, 2014 at 20:41

Sparky

98.8k26 gold badges202 silver badges293 bronze badges

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

4 Comments

umki Over a year ago

Thank you very much. How can i add rules for : if (InvoiceNumber_" + itemIndex + "__InvoiceNumber) is not null, [" + itemIndex + "].Amount must be required ?

Sparky Over a year ago

@umki, not sure what you're asking. Just call .rules('add') to dynamically add rule(s) at any time.

umki Over a year ago

I am trying to ask : There are two coloums in every row, and i want to perform conditional validation. If the field1 is not null, field2 is required. But if field is null, field2 is not required.

Sparky Over a year ago

@umki, you would apply a conditional rule using the depends property. Search this page for "depends": jqueryvalidation.org/validate

Collectives™ on Stack Overflow

Jquery Validation for Dynamically Created Fields

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related