ajax - Jquery Validation dynamically add rules for each input once form generated -

i have php dynamically creating form, , being loaded ajax. im using jquery validation check form, not know names of inputs in advance, need add rules after form loaded , before user submits form.

i've tried following, attempts submit form on first click, , check rules on second.

$("#readingform").validate({         invalidhandler: function () { //display error alert on form submit                           empglobal.showalert('', '', 'danger', 'there error' , '', '', '', 'warning');         },         submithandler: function (){                  $('#readingform .meter-val').each(function(){                 $(this).rules( "add", {                     required: true,                     number: true,                     minlength: 2                 });             });             $('#readingform .insert-val').each(function(){                 $(this).rules( "add", {                     required: true,                     minlength: 10,                     date: true                 });             });             $.ajax({                 url: 'include/pages/readings.php?',                 data: $(this).serialize(),                 type: 'post',                 success: function (data) {                     empglobal.showalert('', '', 'success', message, '', '', '', 'success', jqxhr.status);                 },                 error: function (jqxhr, textstatus, errorthrown) {                     returnmes = $.parsejson(jqxhr.responsetext);                     message = 'a ' + jqxhr.status + ' ' + errorthrown + ' error occured. <br /> <i>message details: ' + returnmes + '</i>';                     empglobal.showalert('', '', 'danger', message, '', '', '', 'warning', jqxhr.status);                 },             });         }     }); 

help on 1 appreciated, i've been going round in circles 1 hours.

your code:

$("#readingform").validate({     invalidhandler: function () { //display error alert on form submit                       empglobal.showalert('', '', 'danger', 'there error' , '', '', '', 'warning');     },     submithandler: function (){              $('#readingform .meter-val').each(function(){             $(this).rules( "add", {                ///             });         });         $('#readingform .insert-val').each(function(){             $(this).rules( "add", {                 ///             });         });         $.ajax({             ///         });     } }); 

it attempts submit form on first click, , check rules on second.

while should not put .rules() method anywhere inside of .validate() method, makes no sense inside of submithandler. since submithandler fires when form valid, it's late adding/evaluating new rules... why have click twice.

i not know names of inputs in advance, need add rules after form loaded , before user submits form.

1. call .validate() form created. initializes plugin. one time inside dom ready handler if form exists when page loads. otherwise, one time after form loaded/created.

2. call .rules() method form's inputs created. outside of .validate() method. if input elements created @ same time form, call .rules() method after call .validate().

 

// call .validate() once, after form created.  $("#readingform").validate({     invalidhandler: function () { //display error alert on form submit                       empglobal.showalert('', '', 'danger', 'there error' , '', '', '', 'warning');     },     submithandler: function (){              $.ajax({             url: 'include/pages/readings.php?',             data: $(this).serialize(),             type: 'post',             success: function (data) {                 empglobal.showalert('', '', 'success', message, '', '', '', 'success', jqxhr.status);             },             error: function (jqxhr, textstatus, errorthrown) {                 returnmes = $.parsejson(jqxhr.responsetext);                 message = 'a ' + jqxhr.status + ' ' + errorthrown + ' error occured. <br /> <i>message details: ' + returnmes + '</i>';                 empglobal.showalert('', '', 'danger', message, '', '', '', 'warning', jqxhr.status);             },         });     } });  // call .rules() once, after relevant elements created , after .validate().  $('#readingform .meter-val').each(function(){     $(this).rules( "add", {         required: true,         number: true,         minlength: 2     }); }); $('#readingform .insert-val').each(function(){     $(this).rules( "add", {         required: true,         minlength: 10,         date: true     }); });