Jquery Validation for Dynamically Created Fields

by

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

More Related Contents:

  1. Validate that end date is greater than start date with jQuery
  2. jQuery validation: change default error message
  3. jQuery Validation plugin: disable validation for specified submit buttons
  4. jQuery Validate array input element which is created dynamically
  5. Using JQuery Validate Plugin to validate multiple form fields with identical names
  6. validating multiple textbox having same name with jquery validator validates only first input
  7. How to clear jQuery validation error messages?
  8. jQuery form validation on button click
  9. jQuery Form Validation before Ajax submit
  10. jQuery validate plugin: validate on blur() by default
  11. How can we specify rules for jQuery validation plugin by class?
  12. override jquery validate plugin email address validation
  13. jQuery Validation not working in IE7 + IE8
  14. Validate Format of an Email Address using Jquery.validate.js [closed]
  15. Validate fields using JQuery validation without any submit?
  16. How can I enable jquery validation on readonly fields?
  17. Limit number of characters in input field
  18. Placing error message for a checkbox array
  19. How to add a ‘submitHandler’ function when using jQuery Unobtrusive Validation?
  20. jQuery select box validation
  21. attaching jquery validation to replacement element
  22. jQuery Validation with multi-part form
  23. $(“#form1”).validate is not a function
  24. jQuery Validation plugin: validate check box
  25. jquery client side validation not working in MVC3 partial view
  26. Jquery validation not working with ckeditor
  27. jQuery validator plugin + ajax submitting not working
  28. jQuery Validate plugin, one out of two fields is required
  29. MVC 4 client side validation not working
  30. jQuery multiple input name[] validation

Leave a Comment