Jquery使用类验证表单的子部分

时间:2014-04-24 07:12:49

标签: jquery forms validation sections

我有这个(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>

这种形式:

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

我想要做的是相同的结果:验证表单的子部分,但不是输入的名称,而是“sub”类。

有一种简单的方法吗? 谢谢大家

0 个答案:

没有答案
相关问题