JavaScript validation using multiple dynamic field forms

Question

I have several forms like this:

<?php for ($i = 0; $i > $n; $i++) { ?> // n is no. of value (no limit) <form> <input name="<?php echo $i; ?>venue" type="text"> <input name="roster" type="text"> <input type="submit" name="btn_venue"> </form> <?php } ?> <form> <input name="hospitality" type="text"> <input name="template" type="text"> <input type="submit" name="btn_hospitality"> </form> ... ... <form> <input name="element" type="text"> <input name="alignment" type="text"> <input type="submit" name="btn_xyz"> </form> 

I want validate (the field should not be empty) in all form, so how can I use validation?

I tried jQuery validation:

 <script> $('document').ready(function () { $('form').each(function (key, form) { $(form).validate({ rules: { hospitality: { required: true }, //... //... alignment: { required: true } }); }); }); </script> 

I manage the static validation of the name field, but I do not know about the dynamic validation of the name venue . Can anyone help me?

if only one form easily supports, but dynamically represents several forms confirming how to check.

while only one form represents, but a specific form field checks, how is this possible?

Answer 1

Try it. It goes through each form and for each of them through each input (type of text) and creates the necessary rule for each of them. It then loads the dynamically generated rules into the validation function.

 $('document').ready(function () { $('form').each(function (key, form) { // build the rules object dynamically var rules = {}; // loop through each input in the form $(form).find('input[type="text"]').each(function(idx, obj) { // make a rule for this input rules[obj.name] = {"required": true}; }); $(form).validate({ "rules": rules }); }); }); 

Answer 2

Okey is not sure if this is the cleanest way to do this, but this is the first that crosses my mind. First edit your html, so the form has id="form$i", input id="input$i", and submit has id="$i" . Also add a class to submit class="validate"

 <?php for ($i = 0; $i > $n; $i++) { ?> // n is no. of value (no limit) <form id="form<?php echo $i; ?>">//so id="form2" for example <input id="input<?php echo $i; ?>" name="<?php echo i; ?>venue" type="text">// id="input2" <input name="roster" type="text"> <input id="<?php echo $i; ?>" class="validate" type="submit" name="btn_venue">//id="2" </form> <?php } ?> 

JQuery that should work, I will explain each line in the code

 <script> $(function () { $(".validate").click(function () { //this is call for each click button with class validate var id = $(this).attr('id');//getting id of the clicked element which is $i var formid = 'form' + id;//creating new var formid which will target formid (for example: in first loop $i=1, so id=1, and formid=form1) var input = 'input' + id;//creating input which value will be input$i $('#' + formid).on('submit', function (e) {//on form submit validate function if ($(#input).value == '') { return false; } else { return true; } }); }); }); </script> 

I hope you understand the logic, maybe I made a mistake somewhere, so look carefully.