Validating dynamically generated forms using Javascript

Question

I'm having some difficulty validating dynamically generated forms. The general idea is I have to submit multiple forms at once and validate them all beforehand. However, I don't know the form id ahead of time.

Here is the form:

/* Begin Edit Row Fields */
        echo "<tr id=\"$I_ID\" class=\"toggleEdit\">";
            echo "<td>";
                echo $row[1];
            echo "</td>";
        /* Begin submit edits form(s) */
        /* Loop for generation of form values and text fields */
        for ($pointer = 2 ; $pointer < $countRows ; ++$pointer) {
            echo "<td>";
                echo "<form class=\"validateForms\" id=\"validateForms" . $I_ID . "\" name=\"editRow[]\" action=\"\" method=\"POST\">";
                echo "<input type=\"text\" value=\"$row[$pointer]\" name=\"$columns[$pointer]\">";
                echo "</form>";
            echo "</td>";
        } //End loop
            echo "<td>";
                /* Static form values */
                echo "<form id=\"" . $I_ID . "editRow\" name=\"" . $I_ID . "editRow\" action=\"\" method=\"POST\">";
                    echo "<input type=\"hidden\" name=\"I_ID\" value=\"$I_ID\">";
                    echo "<input type=\"hidden\" name=\"editRow\" value=\"$thatTable\">";
                echo "</form>";
                echo "<input type=\"button\" id=\"" . $I_ID . "editRow\" class=\"submitEdit\" value=\"Submit Edit\">";
        /* End submit edits form(s) */
            echo "</td>";
        echo "</tr>";
        /* End edit row fields */

This following code does not work, but captures what I'm trying to accomplish. I need the .on 'click' function because I'm submitting several forms at the same time. I also need a way to apply validate to the multiple forms, but also differentiate between groupings of forms. I have no idea how to accomplish what I'm trying to do from here.

$('.validateForms').validate({

        //However many rules I need

        $('.submitEdit').on('click', function() {
            var i_id = $(this).attr('id');  
            var formSubmit = [
                         document.forms[i_id],
                         document.forms[i_id + "2"],
                         document.forms[i_id + "3"],
                         document.forms[i_id + "4"],
                         document.forms[i_id + "5"],
                         document.forms[i_id + "6"],
                         document.forms[i_id + "7"],
                         document.forms[i_id + "8"],
                         document.forms[i_id + "9"]
                         ]     

        //It seems like I actually need to apply the rules here to cover the specific forms

            submitHandler: function(form) {
                $.ajax({
                    type: 'POST', 
                    url: "IRCprocessDrawTables.php",
                    data: $(formSubmit).serializeArray(),
                    cache: false,
                    success: function(result){
                        $('body').html(result);
                    } //end result
                }); //end .ajax
            } //end submitHandler
        }); //end click
    }); //end validate

Answer 1

You don't need to know the ID to validate a form just call a jQuery each function on the class like this:

    $('.submitEdit').on('click', function() {
       $('.validateForms').each(function(){
          var err = 0;
          var form = $(this).attr('id');
          $(form + ' :input').each(function(){
             if ($(this).val() === null || $(this).val().length === 0){
                err++;
             }
          }
          if (err > 0){
             //Err Code Here
          } else {
             //Success Code Here
          }
       }
    }

I haven't tested this against your code, but I've used similar solutions before so with a little tweaking I think this should work for you.