BootWiki教程网
源代码：
点击运行
<!DOCTYPE html> <html> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> <title>jQuery Validate 插件 - 折叠面板表单验证</title> <script src="//www.bootwiki.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script> <script src="//www.bootwiki.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script> <script src="//www.bootwiki.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script> <script src="//www.bootwiki.com/assets/jquery-validation-1.14.0/demo/marketo/jquery.maskedinput.js"></script> <script src="https://code.jquery.com/ui/1.10.2/jquery-ui.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#recordClientPhone").mask("(999) 999-9999"); $("#recordClientPhoneAlt").mask("(999) 999-9999"); $("#recordClientZip").mask("99999"); $("#recordPropertyZip").mask("99999"); $("#recordPurchaseZip").mask("99999"); // 添加 * 到必填字段的标签 $('label.required').append(' <strong>*</strong> '); // 折叠面板功能 var accordion = $("#stepForm").accordion(); var current = 0; $.validator.addMethod("pageRequired", function(value, element) { var $element = $(element) function match(index) { return current == index && $(element).parents("#sf" + (index + 1)).length; } if (match(0) || match(1) || match(2)) { return !this.optional(element); } return "dependency-mismatch"; }, $.validator.messages.required) var v = $("#cmaForm").validate({ errorClass: "warning", onkeyup: false, onblur: false, submitHandler: function() { alert("Submitted, thanks!"); } }); // 返回按钮不需要运行验证 $("#sf2 .prevbutton").click(function(){ accordion.accordion("option", "active", 0); current = 0; }); $("#sf3 .prevbutton").click(function(){ accordion.accordion("option", "active", 1); current = 1; }); // 所有通过上面指定的目标重载的按钮都要运行验证 $(".open2").click(function() { if (v.form()) { accordion.accordion("option", "active", 2); current = 2; } }); $(".open1").click(function() { if (v.form()) { accordion.accordion("option", "active", 1); current = 1; } }); $(".open0").click(function() { if (v.form()) { accordion.accordion("option", "active", 0); current = 0; } }); }); </script> <style type="text/css"> .warning{ color:red; } </style> <link href="//www.bootwiki.com/assets/jquery-validation-1.14.0/demo/multipart/style.css" media="screen" rel="stylesheet" type="text/css" /> </head> <body> <div id="wrap"> <div id="main"> <h1 class="top bottom"><span>帮我</span>买卖房屋</h1> <h2>该表单只需要 3 步即可快速完成！</h2> <form id="cmaForm" method="post" name="cmaForm"> <input id="recordRequestPrimaryServiceID" name="recordRequestPrimaryServiceID" type="hidden" value="100" /> <input id="recordClientServices" name="recordClientServices" type="hidden" value="1,3" /> <ul class="ui-accordion-container" id="stepForm"> <li id="sf1"><a class="ui-accordion-link" href='#'> </a> <div> <fieldset><legend>第 1 步（共 3 步）</legend> <div class="requiredNotice">*必填字段</div> <h3 class="stepHeader">告诉我们您想要购买的房屋的一些特征</h3> <label class="input required" for="recordPurchaseMetRealtor">您目前是一个房地产经纪人吗？</label> 否： <input checked="checked" class="inputclass" name="recordPurchaseMetRealtor" type="radio" value="0" /> 是： <input class="inputclass pageRequired" name="recordPurchaseMetRealtor" title="请选择是或否" type="radio" value="1" /> <div class="formspacer"></div> <label class="input required" for="recordPurchaseTimeFrameID">您打算何时搬迁？</label> <select class="inputclass pageRequired" id="recordPurchaseTimeFrameID" name="recordPurchaseTimeFrameID" title="请选择一个时间段"> <option value="">-请选择-</option> <option value="1">少于 3 个月</option> <option value="2">3-6 个月</option> <option value="3">6-9 个月</option> <option value="4">9-12 个月</option> <option value="5">多于 12 个月</option> </select> <br /> <label class="input required" for="recordPurchasePriceRangeID">购买价格范围：</label> <select class="inputclass pageRequired" id="recordPurchasePriceRangeID" name="recordPurchasePriceRangeID" title="请选择一个价格范围"> <option value="">-请选择-</option> <option value="1"></option> <option value="2">$75,000 - $100,000</option> <option value="3">$100,000 - $125,000</option> <option value="4">$125,000 - $150,000</option> <option value="5">$150,000 - $200,000</option> <option value="6">$200,000 - $250,000</option> <option value="7">$250,000 - $300,000</option> <option value="8">$300,000 - $350,000</option> <option value="9">$350,000 - $400,000</option> <option value="10">$400,000 - $500,000</option> <option value="11">$500,000 - $700,000</option> <option value="12">$700,000 - $900,000</option> <option value="13">> $900,000</option> </select> <br /> <label class="input required" for="recordPurchaseState">州：</label> <select class="inputclass pageRequired" id="recordPurchaseState" name="recordPurchaseState" title="请选择一个州"> <option value="">-请选择-</option> <option value="AL">Alabama</option> <option value="AK">Alaska</option> <option value="AZ">Arizona</option> <option value="AR">Arkansas</option> <option value="CA">California</option> <option value="CO">Colorado</option> <option value="CT">Connecticut</option> <option value="DE">Delaware</option> <option value="DC">Dist of Columbia</option> <option value="FL">Florida</option> <option value="GA">Georgia</option> <option value="HI">Hawaii</option> <option value="ID">Idaho</option> <option value="IL">Illinois</option> <option value="IN">Indiana</option> <option value="IA">Iowa</option> <option value="KS">Kansas</option> <option value="KY">Kentucky</option> <option value="LA">Louisiana</option> <option value="ME">Maine</option> <option value="MD">Maryland</option> <option value="MA">Massachusetts</option> <option value="MI">Michigan</option> <option value="MN">Minnesota</option> <option value="MS">Mississippi</option> <option value="MO">Missouri</option> <option value="MT">Montana</option> <option value="NE">Nebraska</option> <option value="NV">Nevada</option> <option value="NH">New Hampshire</option> <option value="NJ">New Jersey</option> <option value="NM">New Mexico</option> <option value="NY">New York</option> <option value="NC">North Carolina</option> <option value="ND">North Dakota</option> <option value="OH">Ohio</option> <option value="OK">Oklahoma</option> <option value="OR">Oregon</option> <option selected="selected" value="PA">Pennsylvania</option> <option value="RI">Rhode Island</option> <option value="SC">South Carolina</option> <option value="SD">South Dakota</option> <option value="TN">Tennessee</option> <option value="TX">Texas</option> <option value="UT">Utah</option> <option value="VT">Vermont</option> <option value="VA">Virginia</option> <option value="WA">Washington</option> <option value="WV">West Virginia</option> <option value="WI">Wisconsin</option> <option value="WY">Wyoming</option> </select> <br /> <label class="input" for="recordPurchasePropertyTypeID">所需的房屋类型：</label> <select class="inputclass" id="recordPurchasePropertyTypeID" name="recordPurchasePropertyTypeID" title="请选择一个类型"> <option value="">-请选择-</option> <option value="1">单户型</option> <option value="2">公寓</option> <option value="3">联排别墅</option> <option value="4">出租房</option> <option value="5">多户型</option> <option value="6">度假屋</option> <option value="7">其他</option> </select> <br /> <div class="buttonWrapper"><input alt="下一步" class="open1 nextbutton" name="formNext1" title="下一步" type="button" value="下一步" /></div> </fieldset> </div> </li> <li id="sf2"> <a class="ui-accordion-link" href='#'> </a> <div> <fieldset><legend>第 2 步（共 3 步）</legend> <div class="requiredNotice">*必填字段</div> <h3 class="stepHeader">告诉我们您想要出售的房屋的一些特征</h3> <label class="input required" for="recordClientTimeFrameID">您打算何时出售？</label> <select class="inputclass pageRequired" id="recordClientTimeFrameID" name="recordClientTimeFrameID" title="请选择一个时间段"> <option value="">-请选择-</option> <option value="1">少于 3 个月</option> <option value="2">3-6 个月</option> <option value="3">6-9 个月</option> <option value="4">9-12 个月</option> <option value="5">多于 12 个月</option> </select> <br /> <label class="input required" for="recordClientHomeTypeID">所卖的房屋类型：</label> <select class="inputclass pageRequired" id="recordClientHomeTypeID" name="recordClientHomeTypeID" title="请选择一个类型"> <option value="">-请选择-</option> <option value="1">单户型</option> <option value="2">公寓</option> <option value="3">联排别墅</option> <option value="4">出租房</option> <option value="5">多户型</option> <option value="6">度假屋</option> <option value="7">其他</option> </select> <br /> <label class="input required" for="recordPropertyAddress1">物业地址：</label> <input class="inputclass pageRequired" id="recordPropertyAddress1" maxlength="254" name="recordPropertyAddress1" onblur="recordClientAddress1.value = this.value" title="物业地址是必填的" /><br /> <label class="input" for="recordPropertyAddress2">地址（2）：</label> <input class="inputclass" id="recordPropertyAddress2" maxlength="254" name="recordPropertyAddress2" onblur="recordClientAddress2.value = this.value" /><br /> <label class="input required" for="recordPropertyCity">城市：</label> <input class="inputclass pageRequired" id="recordPropertyCity" maxlength="254" name="recordPropertyCity" onblur="recordClientCity.value = this.value" title="城市是必填的" /><br /> <label class="input required" for="recordPropertyState">州：</label> <select class="inputclass pageRequired" id="recordPropertyState" name="recordPropertyState" onchange="recordClientState.value = this.value" title="请选择一个州"> <option value="">-请选择-</option> <option value="AL">Alabama</option> <option value="AK">Alaska</option> <option value="AZ">Arizona</option> <option value="AR">Arkansas</option> <option value="CA">California</option> <option value="CO">Colorado</option> <option value="CT">Connecticut</option> <option value="DE">Delaware</option> <option value="DC">Dist of Columbia</option> <option value="FL">Florida</option> <option value="GA">Georgia</option> <option value="HI">Hawaii</option> <option value="ID">Idaho</option> <option value="IL">Illinois</option> <option value="IN">Indiana</option> <option value="IA">Iowa</option> <option value="KS">Kansas</option> <option value="KY">Kentucky</option> <option value="LA">Louisiana</option> <option value="ME">Maine</option> <option value="MD">Maryland</option> <option value="MA">Massachusetts</option> <option value="MI">Michigan</option> <option value="MN">Minnesota</option> <option value="MS">Mississippi</option> <option value="MO">Missouri</option> <option value="MT">Montana</option> <option value="NE">Nebraska</option> <option value="NV">Nevada</option> <option value="NH">New Hampshire</option> <option value="NJ">New Jersey</option> <option value="NM">New Mexico</option> <option value="NY">New York</option> <option value="NC">North Carolina</option> <option value="ND">North Dakota</option> <option value="OH">Ohio</option> <option value="OK">Oklahoma</option> <option value="OR">Oregon</option> <option selected="selected" value="PA">Pennsylvania</option> <option value="RI">Rhode Island</option> <option value="SC">South Carolina</option> <option value="SD">South Dakota</option> <option value="TN">Tennessee</option> <option value="TX">Texas</option> <option value="UT">Utah</option> <option value="VT">Vermont</option> <option value="VA">Virginia</option> <option value="WA">Washington</option> <option value="WV">West Virginia</option> <option value="WI">Wisconsin</option> <option value="WY">Wyoming</option> </select> <br /> <label class="input required" for="recordPropertyZip">邮编：</label> <input class="inputclass pageRequired" id="recordPropertyZip" maxlength="254" name="recordPropertyZip" onblur="recordClientZip.value = this.value" title="Zip Code is required" /><br /> <label class="input required" for="recordClientPropertyValueID">估计市场价值：</label> <select class="inputclass pageRequired" id="recordClientPropertyValueID" name="recordClientPropertyValueID" title="请选择一个价格范围"> <option value="">-请选择-</option> <option value="1">少于 $75K</option> <option value="2">$75-$100K</option> <option value="3">$100-$125K</option> <option value="4">$125-$150K</option> <option value="5">$150-$200K</option> <option value="6">$200-$250K</option> <option value="7">$250-$300K</option> <option value="8">$300-$350K</option> <option value="9">$350-$400K</option> <option value="10">$400-$500K</option> <option value="11">$500-$700K</option> <option value="12">$700-$900K</option> <option value="13">多于 $900K</option> </select> <br /> <label class="input" for="recordPropertyBedroomsID">卧室：</label> <select class="inputclass" id="recordPropertyBedroomsID" name="recordPropertyBedroomsID"> <option value="">-请选择-</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5+</option> </select> <br /> <label class="input" for="recordPropertyBathroomsId">浴室：</label> <select class="inputclass" id="recordPropertyBathroomsId" name="recordPropertyBathroomsId"> <option value="">-请选择-</option> <option value="1">1</option> <option value="2">1.5</option> <option value="3">2</option> <option value="4">2.5</option> <option value="5">3</option> <option value="6">3.5</option> <option value="7">4+</option> </select> <br /> <label class="input" for="recordPropertyAgeId">房屋的大约年龄：</label> <select class="inputclass" id="recordPropertyAgeId" name="recordPropertyAgeId"> <option value="">-请选择-</option> <option value="1">少于 1 年</option> <option value="2">1-5 年</option> <option value="3">6-10 年</option> <option value="4">11-15 年</option> <option value="5">多于 15 年</option> </select> <br /> <label class="input" for="recordPropertySqFt">大约平方英尺：</label> <input class="inputclass" id="recordPropertySqFt" maxlength="254" name="recordPropertySqFt" /><br /> <div class="buttonWrapper"><input alt="返回" class="open0 prevbutton" name="formBack0" title="返回" type="button" value="返回" /> <input alt="下一步" class="open2 nextbutton" name="formNext2" title="下一步" type="button" value="下一步" /></div> </fieldset> </div> </li> <li id="sf3"> <a class="ui-accordion-link" href='#'> </a> <div> <fieldset><legend>第 3 步（共 3 步）</legend> <div class="requiredNotice">*必填字段</div> <h3 class="stepHeader">告诉我们有关您的信息</h3> <label class="input required" for="recordClientNameFirst">名字：</label> <input class="inputclass pageRequired" id="recordClientNameFirst" maxlength="254" name="recordClientNameFirst" title="名字是必填的" /> <br /> <label class="input required" for="recordClientNameLast">姓氏：</label> <input class="inputclass pageRequired" id="recordClientNameLast" maxlength="254" name="recordClientNameLast" title="姓氏是必填的" /> <br /> <label class="input required" for="recordClientAddress1">目前地址：</label> <input class="inputclass pageRequired" id="recordClientAddress1" maxlength="254" name="recordClientAddress1" title="地址是必填的" /> <br /> <label class="input" for="recordClientAddress2">地址（2）：</label> <input class="inputclass" id="recordClientAddress2" maxlength="254" name="recordClientAddress2" /> <br /> <label class="input required" for="recordClientCity">城市：</label> <input class="inputclass pageRequired" id="recordClientCity" maxlength="254" name="recordClientCity" title="城市是必填的" /> <br /> <label class="input required" for="recordClientState">州：</label> <select class="inputclass pageRequired" id="recordClientState" name="recordClientState" title="请选择一个州"> <option value="">-请选择-</option> <option value="AL">Alabama</option> <option value="AK">Alaska</option> <option value="AZ">Arizona</option> <option value="AR">Arkansas</option> <option value="CA">California</option> <option value="CO">Colorado</option> <option value="CT">Connecticut</option> <option value="DE">Delaware</option> <option value="DC">Dist of Columbia</option> <option value="FL">Florida</option> <option value="GA">Georgia</option> <option value="HI">Hawaii</option> <option value="ID">Idaho</option> <option value="IL">Illinois</option> <option value="IN">Indiana</option> <option value="IA">Iowa</option> <option value="KS">Kansas</option> <option value="KY">Kentucky</option> <option value="LA">Louisiana</option> <option value="ME">Maine</option> <option value="MD">Maryland</option> <option value="MA">Massachusetts</option> <option value="MI">Michigan</option> <option value="MN">Minnesota</option> <option value="MS">Mississippi</option> <option value="MO">Missouri</option> <option value="MT">Montana</option> <option value="NE">Nebraska</option> <option value="NV">Nevada</option> <option value="NH">New Hampshire</option> <option value="NJ">New Jersey</option> <option value="NM">New Mexico</option> <option value="NY">New York</option> <option value="NC">North Carolina</option> <option value="ND">North Dakota</option> <option value="OH">Ohio</option> <option value="OK">Oklahoma</option> <option value="OR">Oregon</option> <option selected="selected" value="PA">Pennsylvania</option> <option value="RI">Rhode Island</option> <option value="SC">South Carolina</option> <option value="SD">South Dakota</option> <option value="TN">Tennessee</option> <option value="TX">Texas</option> <option value="UT">Utah</option> <option value="VT">Vermont</option> <option value="VA">Virginia</option> <option value="WA">Washington</option> <option value="WV">West Virginia</option> <option value="WI">Wisconsin</option> <option value="WY">Wyoming</option> </select> <br /> <label class="input required" for="recordClientZip">邮编：</label> <input class="inputclass pageRequired" id="recordClientZip" maxlength="12" name="recordClientZip" title="邮政编码是必填的" /> <br /> <label class="input required" for="recordClientPhone">电话号码：</label> <input class="inputclass pageRequired" id="recordClientPhone" maxlength="254" name="recordClientPhone" title="电话号码是必填的" /> <br /> <label class="input" for="recordClientPhoneAlt">备用号码：</label> <input class="inputclass" id="recordClientPhoneAlt" maxlength="254" name="recordClientPhoneAlt" /> <br /> <label class="input required" for="recordClientEmail">Email 地址：</label> <input class="inputclass pageRequired email" id="recordClientEmail" maxlength="254" name="recordClientEmail" title="Email 地址是必填的" /> <br /> <label class="input required" for="recordClientEmail1">确认 Email：</label> <input class="inputclass pageRequired" equalTo: id="recordClientEmail1" name="recordClientEmail1""'#recordClientEmail" maxlength="254" title="请确认您的 email 地址" /> <br /> <br /> <p class="formDisclaimer">这是一个示例表单，信息不会被发送到任何地方。</p> <div class="buttonWrapper"><input alt="返回" class="open1 prevbutton" name="formBack1" title="返回" type="button" value="返回" /> <input alt="提交" class="submitbutton" id="submit" name="submit" title="提交" type="submit" value="提交"></div> </fieldset> </div> </li> </ul> </form> </div> </div> </body> </html>
运行结果