使用validate.js进行多部分表单验证

Question

我想使用带有validate.js的多页表单，但是这些字段并没有以这种方式进行验证。 我实际上在做的是使用JQuery隐藏和显示表单字段以进入多个页面。 但是，我正在使用一个JQuery文件来执行此操作，当然还要使用另一个JQuery文件来验证表单。 这会引起问题吗？

jsfiddle在下面。 JSFiddle实际上不起作用，因为有2个JQuery文件，但只是希望您看到html和javascript。

http://jsfiddle.net/tunm34p1/1/

$("#mbContact").validate({

        rules:{
            fname:{
                required:true
            },
            lname:{
                required: true
            },
            csheme:{
                required: true
            },
            deladdr:{},
            emailaddress:{
                email: true,
                required: true
            },
            typeOfEvent:{
                required: true
            },
            homePhone:{
                digits: true
            },
            workPhone:{
                digits: true
            },
            mobilePhone:{
                digits: true
            }
        },
        messages:{
            fname:{
                required:"You need to enter your name!"
            },
            lname:{
                required:"you need your last name too!"
            }
    }
});

这里的另一个JQuery文档

 $(document).ready(function() {

        $("button, input[type='button']").click(function(){
            $('#contact').hide();
            $('#nextForm').show();
        });
 });

Answer 1

有两个问题。

• 默认情况下，验证器不验证隐藏的元素-这可以通过ignore选项进行控制
• 您需要更改默认错误显示机制

 $(document).ready(function() { $("#mbContact").validate({ ignore: '', //if page wise validation is not enabled errorLabelContainer: "#messageBox", wrapper: "li", rules: { fname: { required: true }, lname: { required: true }, csheme: { required: true }, deladdr: {}, emailaddress: { email: true, required: true }, typeOfEvent: { required: true }, homePhone: { digits: true }, workPhone: { digits: true }, mobilePhone: { digits: true } }, messages: { fname: { required: "You need to enter your name!" }, lname: { required: "you need your last name too!" } } }); }); //another jquery document $(document).ready(function() { $("button, input[type='button']").click(function() { //move to next page only of current one is valid if(!$('#contact').find(':input').valid()){ return; } $('#contact').hide(); $('#nextForm').show(); }); }); 

 <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.js"></script> <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.12.0/jquery.validate.js"></script> <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.12.0/additional-methods.js"></script> <h2>Contact Form</h2> <!-- if page wise validation is not enabled --> <ul id="messageBox"></ul> <div id="contact" class="basic-grey" style=""> <form id="mbContact" action="" method="post"> <label for="fname">First Name</label> <input id="fname" name="fname" type="text" /> <br/> <label for="lname">Last Name</label> <input id="lname" name="lname" type="text" /> <br/> <label for="emailaddress">Email Address</label> <input id="emailaddress" name="emailaddress" type="text" /> <br/> <label for="typeOfEvent">Type Of Event</label> <select name="typeOfEvent" id="typeOfEvent"> <option value>Select</option> <option value="Wedding">Wedding</option> <option value="Birthday">Birthday</option> <option value="Special Occasion">Special Occasion</option> <option value="BabyShower">Baby Shower</option> </select> <br/> <label for="datepicker">Event Date</label> <input type="text" id="datepicker" /> <br/> <label for="cscheme">Color Scheme</label> <input id="cscheme" name="cscheme" type="text" /> <br/> <label for="noOfServings">Number Of Servings</label> <select name="noOfServings" id="noOfServings"> <option value>Choose Number</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> </select> <br/> <input type="button" value="next" name="next" class="nextB" /> </div> <div id="nextForm" style="display:none;" class="basic-grey"> <label for="noOfTiers">Number Of Tiers</label> <select name="noOfTiers" id="noOfTiers"> <option value>Tiers</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> </select> <br/> <label for="workPhone">Work Telephone</label> <input type="text" id="workPhone" name="workPhone" /> <br/> <label for="homePhone">Home Telephone</label> <input type="text" id="homePhone" name="homePhone" /> <br/> <label for="mobilePhone">Mobile Telephone</label> <input type="text" id="mobilePhone" name="mobilePhone" /> <br/> <label for="deladdr">Delivery Address</label> <input id="deladdr" name="deladdr" type="text" /> <br/> <input type="submit" value="submit" class="submit" name="submit" /> </div> </form> 

注意：您将必须添加上一个按钮，以便使用可以返回上一页来修复错误。