jQuery form validation with dynamically generated forms - php

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

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.