jQuery表单验证与动态生成的表单

Question

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:

1. 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.
2. 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();
    });
});

Answer 1

give the same class to all the form than try this,

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

Answer 2

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.