I've got this (http://www.gearheadsoftware.com/subsect-112.html)
<script type="text/javascript">
$(function() {
// Rules just for the Financial Info subsection
var eligibilityRules = {
i4: "required",
i5: "required"
};
// Rules for the whole form (combine subsect w/ rest)
var mainRules = $.extend({
i1: "required",
i3: "required"
}, eligibilityRules);
// Set up validation on the whole form
$("form").validate({rules: mainRules});
// Make the button validate the subsection on click
$("#eligCheck").click(function(evt) {
// Set up validation, do it, and check results all at once
if ( !$("#subsect").validate({rules: eligibilityRules}).form() ) {
return false;
}
// There would actually be an AJAX submit & server validation
// here
alert("Eligible!");
});
});
</script>
And this form :
<form action="">
<fieldset>
<legend>Main Part of Form</legend>
<div>
<label for="i1">Required Field 1: *</label>
<input id="i1" name="i1">
</div>
<div>
<label for="i2">Optional Field:</label>
<input id="i2" name="i2">
</div>
<div>
<label for="i3">Required Field 2: *</label>
<input id="i3" name="i3">
</div>
<fieldset id="subsect">
<legend>Financial Info Sub-section</legend>
<p>The button should validate just this section and flag any errors. Without entering anything, the
expected result is to see the required error message. The actual result is the alert saying
"Eligible!".</p>
<div>
<label for="i4">Family Size: *</label>
<input id="i4" name="i4" class="sub">
</div>
<div>
<label for="i5">Annual Income: *</label>
<input id="i5" name="i5" class="sub">
</div>
<div>
<label for="i6">Expenses:</label>
<input id="i6" name="i6">
</div>
<input type="button" id="eligCheck" value="Check Eligibility">
</fieldset>
<p>When the main form is submitted, <b>everything</b>, including the subsection, should be re-validated.</p>
</fieldset>
<input type="submit">
</form>
What i want to do is the same result : Validate sub-section of the Form but not with the names of input but class "sub".
Is there an easy way to do that ? Thanks for all