(转)jquery.validate分组验证

http://www.cnblogs.com/wangjq/archive/2011/03/13/1983024.html

在很多时候，我们都不是一步就将所有信息填写完整，然后提交。而是分步进行填写表单，如下所示：

第一步填写基本信息，



第二步填写教育信息



要求我们每一步操作都要进行验证，这样我们可以用以下方式进行验证：


view sourceprint?<script type="text/javascript" language="javascript" src="http://www.cnblogs.com/Scripts/jquery-1.4.1.min.js"></script> 

<script type="text/javascript" language="javascript" src="http://www.cnblogs.com/Scripts/jquery.validate.min.js"></script> 

<h2> 

    ValidateStep</h2> 

<form action="" id="registerForm" method="post"> 

<div class="step1 validationGroup" style="display: block;"> 

    <p> 

        基本情况</p> 

    <table border="0" cellpadding="0" cellspacing="0"> 

        <tr> 

            <td> 

                姓名：<input type="text" id="name" class="required" /> 

            </td> 

        </tr> 

        <tr> 

            <td> 

                年龄：<input type="text" id="age" class="required number" /> 

            </td> 

        </tr> 

        <tr> 

            <td> 

                <input type="button" class="next" value="下一步" /> 

            </td> 

        </tr> 

    </table> 

</div> 

<div class="step2 validationGroup" style="display: none"> 

    <p> 

        教育背景</p> 

    <table border="0" cellpadding="0" cellspacing="0"> 

        <tr> 

            <td> 

                毕业学校：<input type="text" id="school" class="required" /> 

            </td> 

        </tr> 

        <tr> 

            <td> 

                专业：<input type="text" id="major" class="required" /> 

            </td> 

        </tr> 

        <tr> 

            <td> 

                <input type="submit" value="提交" /> 

            </td> 

        </tr> 

    </table> 

</div> 

</form> 

<script language="javascript" type="text/javascript"> 

    function InitValidationGroup() { 

        $('.validationGroup .next').click(function (evt) { 

            if (IsValidated($(this).closest(".validationGroup"))) { 

                $(".step1").hide(); 

                $(".step2").show(); 

            } 

            else { 

                evt.preventDefault(); 

            } 

        }); 

 

        $('.step1 :text').keydown(function (evt) { 

            if (evt.keyCode == 13) { 

                var $nextInput = $(this).nextAll(':input:first'); 

                if ($nextInput.is(':submit')) { 

                    Validate(evt); 

                } 

                else { 

                    evt.preventDefault(); 

                    $nextInput.focus(); 

                } 

            } 

        }); 

    } 

    function IsValidated(group) { 

        var isValid = true; 

        group.find(':input').each(function (i, item) { 

            if (!$(item).valid()) 

                isValid = false; 

        }); 

 

        return isValid; 

    } 

 

    $(document).ready(function () { 

        InitValidationGroup(); 

        var validator = $("#registerForm").validate(); 

    });     

</script>