使用 Javascript 验证动态生成的表单

Question

我在验证动态生成的表单时遇到一些困难。一般的想法是我必须一次提交多个表单并事先验证它们。但是，我事先不知道表单 ID。

表格如下：

/* 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 */

以下代码不起作用，但捕获了我要完成的任务。我需要 .on 'click' 函数，因为我同时提交了多个表单。我还需要一种方法来将验证应用于多个表单，但还要区分表单分组。我不知道如何从这里完成我想做的事情。

$('.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

您无需知道 ID 即可验证表单，只需调用 class 上的每个函数 jQuery，如下所示：

    $('.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
          }
       }
    }

我没有针对您的代码对此进行测试，但我之前使用过类似的解决方案，因此稍作调整我认为这应该适合您。

使用 Javascript 验证动态生成的表单

Validating dynamically generated forms using Javascript

javascript

forms

validation

jquery