使用动态生成的表单进行jQuery表单验证(jQuery form validation with dynamically generated forms)

使用动态生成的表单进行jQuery表单验证(jQuery form validation with dynamically generated forms)

我有一个页面，其中包含几种使用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(); }); });

I have a page with several forms which are dynamically generated using PHP. I am validating them using the jQuery Validation plugin. The forms are all the same, but relate to different items so I have given all of the forms the same class so they can be validated by one function (each form also has a unique ID). But I'm having some problems:

I would like the error messages to appear by the correct form items, but if I'm just using the form's class, the validator won't know which form the item is from. I have a hyperlink to submit the form (and a regular submit button in <noscript> tags), and would usually use jQuery to submit the form, but again, how will jQuery know which submit link I've clicked, and which form to submit?

The easiest thing I can think of is to pass the form ID to the validate some how. Is that possible?

The forms look like this:

<?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 } ?>

I would normally validate the form like this:

$(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(); }); });

最满意答案

给所有表格提供相同的课程，而不是试试这个，

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

I ended up iterating through my result twice, so I create a form validator for each form dynamically, and then dynamically create the forms. This was the best way I could think of to give me the control I wanted, although obviously it's slower and produces more code - not an ideal solution but it will do for this situation.