使用动态生成的表单进行 jQuery 表单验证答案

【问题标题】：jQuery form validation with dynamically generated forms使用动态生成的表单进行 jQuery 表单验证
【发布时间】：2011-08-09 01:07:06
【问题描述】：

我有一个页面，其中包含几个使用 PHP 动态生成的表单。我正在使用 jQuery Validation 插件对它们进行验证。表单都是相同的，但与不同的项目相关，因此我将所有表单赋予了相同的类，以便它们可以通过一个函数进行验证（每个表单也有一个唯一的 ID）。但我遇到了一些问题：

我希望错误消息出现在正确的表单项中，但如果我只是使用表单的类，验证器将不知道该项来自哪个表单。
我有一个提交表单的超链接（以及<noscript> 标签中的常规submit 按钮），并且通常会使用jQuery 来提交表单，但同样，jQuery 将如何知道我点击了哪个提交链接，以及提交哪种表格？

我能想到的最简单的事情是将表单 ID 传递给验证方法。这可能吗？

表格如下所示：

<?php while($row= pg_fetch_row($groups)) {  ?>
<p class="error" id="error-<?php echo $row[0] ?>"></p>
<form action="../scripts/php/groups-process.php" method="post" id="editgroup-<?php echo $row[0] ?>" class="editgroup">
    <label for ="edit-<?php echo $row[0] ?>" >Edit group name:</label>
    <input type="text" class="text" size="20" maxlength="30" name="edit" id="edit-<?php echo $row[0] ?>" value="<?php echo $row[1] ?>" />
    <noscript><input type="submit" name="editgroup" value="Submit" /></noscript>
    <div id="submitcontainer-<?php echo $row[0] ?>"></div>
</form>
<?php } ?>

我通常会像这样验证表单：

$(document).ready(function(){
    $("#editgroup").validate({
        rules: {edit: {required: true, maxlength: 30}},
        messages: {edit: {required: 'Please enter a group name', maxlength: 'Please enter a shorter group name'},
        errorContainer: "p#error",
    });
    $("#submitcontainer").html('<a class="button" href="javascript:void();" id="submitlink" name="submit">Submit</a>');
    $("#submitlink").click(function() {
        $("#editgroup").submit();
    });
});

【问题讨论】：

请粘贴一些您已经尝试过的HTML和JS代码。
我在我的问题中添加了一些代码。我还没有真正尝试过任何 JS，我开始从我的另一种形式改编代码，然后我就卡住了。我一直在网上寻找，但我没有找到解决方案。

标签： php jquery forms jquery-validate

【解决方案1】：

为所有表单提供相同的类而不是尝试这个，

    <form id="1" class="common" method="post" action="page.php">
    <input type="text" class="common_input_class" size="20" maxlength="30" name="edit" id="whatever" value="whatever" />
    <input type="submit" name="submit" class="submit_this_form" value="submit" />
    </form>

    <form id="2" class="common" method="post" action="page.php">
         <input type="text" class="common_input_class" size="20" maxlength="30" name="edit" id="whatever" value="another value" />
          <input type="submit" name="submit" class="submit_this_form" value="submit" />
    </form>

    <script type="text/javascript">
         $(".common").submit(function(){
       var form_id = $(this).attr('id');
       var input_val = $(this).children('.common_input_class').val();
       if (input_val == '')
       {
        alert("input field is required");
        return false;
       }
});
   </script>

【讨论】：

现在您正在获取表单 ID，并且您知道提交了哪个表单使用该表单 ID 做任何您想做的事情

【解决方案2】：

我最终对结果进行了两次迭代，因此我为每个表单动态创建了一个表单验证器，然后动态创建了表单。这是我能想到的给予我想要的控制权的最佳方式，虽然它显然速度较慢并且产生更多代码 - 不是一个理想的解决方案，但它适用于这种情况。

【讨论】：