如何验证表单而无需提交并转到其他页面使用jquery mobile和Jquery验证？ [英] How do I validate a form without submitting and go to other page with jquery mobile and Jquery validation?
本文介绍了如何验证表单而无需提交并转到其他页面使用jquery mobile和Jquery验证？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
PS：它必须与JQuery.validation插件一起使用
< div data-role =pageid =page2data-add-back-btn =true >
< div data-role =headerdata-position =fixed>
< h1 id =page2Header>< / h1>
< / div>
< div data-role =content>
< form id =sampleProperties>
< label for =station>选择电台：< / label>
< option value =50028000>塔纳马河< / option>
< option value =50010500> Rio Guajataca，Lares< / option>
< option value =60008002>示例River2< / option>
< option value =60008003>示例River3< / option>
< option value =60008004>示例River4< / option>
< / select>
< div class =hide>
< div class ='suspendedAdditionalFields'>
< label for =sampleMediumDropdown>选择样本介质：< / label>
< select name =sampleMediumDropdownid =sampleMediumDropdownonBlur =storeData（this.name，this.value）>
< option value =WS> WS（地表水）< / option>
< option value =WSQ> WSQ（地表水QC）< / option>
< / select>
< / div>
< div class ='bottomAdditionalFields'>
< label for =sampleMediumDropdownBottom>选择样本介质< / label>
< select name =sampleMediumDropdownid =sampleMediumDropdownBottomonBlur =storeData（this.name，this.value）>
< option value =SB> SB（底部素材）< / option>
< option value =SBQ> SBQ（底部素材QC）< / option>
< / select>
< / div>
< / div>
< label for =date>开始日期：< / label>
< input name =dateid =beginDatetype =dateonChange =storeData（this.id，this.value）/>
< div class =hide>
< label for ='EVENT'>水文事件：< / label>
< select name =EVENTid =EVENTonBlur =storeData（this.name，this.value）>
< option value =1> 1-干旱< / option>
< option value =2> 2-溢出< / option>
<选项值=3> 3-调节流量< /选项>
< option value =4> 4-融雪< / option>
< option value =5> 5-地震< / option>
< option value =6> 6-飓风< / option>
< option value =7> 7- Flood< / option>
< option value =8> 8-火山活动< / option>
< option value =9selected> 9-例程样例< / option>
< option value =A> A-弹簧分解< / option>
< option value =B> B-在冰盖下< /选项>
< option value =C> C-冰河湖泊爆发< / option>
< option value =D> D- Mudflow< / option>
< option value =E> E-潮汐动作< / option>
< option value =F> F-火灾，受到火前取样< /选项>
< option value =H> H- Dambreak< / option>
< option value =J> J-Storm< / option>
<选项值=K> K-回水< / option>
< option value =X> X-不适用< / option>
< / select>
< / div>
< div class =ui-grid-a>
< label for =containerCuantity>添加一组单个容器或多个样本集：< / label>
< div class =ui-block-a>
< input type =numbermin =1value =1max =40id =containerCuantityname =containerCuantityonBlur =storeData（this.id，this.value） />< / DIV>
< div class =ui-block-b>
< select id =singleMultiContainername =singleMultiContaineronChange =storeData（this.id，this.value）>
< option value =selected> - 选择容器或设置 - < / option>
< option value =single>单个容器示例< / option>
< option value =multi>多组容器< / option>
< / select>
< / div>
< / div>
< input id ='addSampleParameters'type =submitvalue =Next/>
< / form>
< / div>
< div data-role =footerdata-position =fixed>
< div data-inline =truedata-type =horizontal>< a href =＃data-icon =barsdata-iconpos =notextdata-inline = truedata-mini =falsedata-role =button>菜单< / a>< a id =addSampleParametersdata-icon =arrow-rdata-iconpos =rightdata-inline =truedata-role =buttondata-mini =falsedata-theme =e>下一步< / a>
< / div>
< / div>
< / div>
js：
$（'＃page2'）。bind（'pageinit'，function（）{
$（'＃sampleProperties'）。validate（{
rules：{
必需的，
日期：'required'，
singleMultiContainer：'required'，
containerCuantity：{
required：'true'，
minlength：1 ，
maxlength：40
}
}，
submitHandler：function（form）{
alert（'Success！'）;
}
}）;
}）;
解决方案
>
当我创建多步表单时，我为每个部分使用了一组独特的< form> 标签。然后，我使用 .valid（）方法在转移到下一部分之前测试该部分。 （不要忘记首先初始化插件;在DOM准备就绪的所有表单上调用 .validate（）。）
然后在最后一节中，我在每个表单上使用 .serialize（），并将它们连接成要提交的数据查询字符串。
类似这样的...
$（document）。 on（'pageinit'，function（）{//为jQuery Mobile准备好处理程序
$ b $（'＃form1'）。validate（{//初始化表单1
//规则$ （'＃'）;
$ b $（'＃gotoStep2'）。on（'click'，function（）{//转到步骤2
if（$（'＃form1' ）.valid（））{
//代码显示步骤2并隐藏步骤1
}
}）;
$（'＃form2'）。验证（{//初始化表单2
//规则
}）;
$（'＃gotoStep3'）。on（'click'，function（）{// （$（'＃form2'）。valid（））{
//代码显示第3步并隐藏步骤2
}
}）;
$（'＃form3'）。validate（{initialize form 3
// rules，
submitHandler：函数（form）{
//序列化和连接所有表单的数据
var data = $（'＃form1'）。serialize（）+'&'+ $（'＃form2'）。 serialize（）+'&'+ $（form）.serialize（）
// ajax提交
返回false; //阻止常规表单提交动作
}
}）;
//没有第三个点击处理程序，因为插件在最后一个窗体上使用内置的submitHandler回调函数来处理这个
//。
}）;
重要的是要记住我的点击上面的处理程序没有使用 type =submit按钮。这些是常规按钮，它们是表格标签或 type =button 外 。
只有最后一个表单上的按钮是一个普通的 type =submit按钮。那是因为我只利用了插件内置的 submitHandler 回调函数。
概念验证DEMO： http://jsfiddle.net/8bnZV/
顺便说一句，请注意我是如何将更新过期的 .bind（）现代 .on（）方法。
另外，请参阅参考资料：
https://stackoverflow.com/a/17975061/594235
So I'm trying to validate a JQM form that has 4 parts and are divided in different pages so after I validate the first part I want to go to the second, if the form it's valid. I'm trying to validate with the JQuery.validate plugin but it doesn't respond in any way with the form.
PS:IT MUST BE WITH JQuery.validation plugin
<div data-role="page" id="page2" data-add-back-btn="true">
<div data-role="header" data-position="fixed">
<h1 id="page2Header"></h1>
</div>
<div data-role="content">
<form id="sampleProperties">
<label for="station">Select Station:</label>
<select name="station" id="station" onBlur="storeData(this.id,this.value)" required="true">
<option value="50028000">Tanama River</option>
<option value="50010500">Rio Guajataca, Lares</option>
<option value="60008002">Example River2</option>
<option value="60008003">Example River3</option>
<option value="60008004">Example River4</option>
</select>
<div class="hide">
<div class='suspendedAdditionalFields'>
<label for="sampleMediumDropdown">Select sample medium:</label>
<select name="sampleMediumDropdown" id="sampleMediumDropdown" onBlur="storeData(this.name,this.value)">
<option value="WS">WS(Surface Water)</option>
<option value="WSQ">WSQ(Surface Water QC)</option>
</select>
</div>
<div class='bottomAdditionalFields'>
<label for="sampleMediumDropdownBottom">Select sample medium</label>
<select name="sampleMediumDropdown" id="sampleMediumDropdownBottom" onBlur="storeData(this.name,this.value)">
<option value="SB">SB (bottom material)</option>
<option value="SBQ">SBQ (bottom material QC)</option>
</select>
</div>
</div>
<label for="date">Begin Date:</label>
<input name="date" id="beginDate" type="date" onChange="storeData(this.id,this.value)" />
<div class="hide">
<label for='EVENT'>Hydrologic event:</label>
<select name="EVENT" id="EVENT" onBlur="storeData(this.name,this.value)">
<option value="1">1- Drought</option>
<option value="2">2- Spill</option>
<option value="3">3- Regulated Flow</option>
<option value="4">4- Snowmelt</option>
<option value="5">5- Earthquake</option>
<option value="6">6- Hurricane</option>
<option value="7">7- Flood</option>
<option value="8">8- Volcanic activity</option>
<option value="9" selected>9- Routine Sample</option>
<option value="A">A- Spring breakup</option>
<option value="B">B- Under ice cover</option>
<option value="C">C- Glacial lake outbreak</option>
<option value="D">D- Mudflow</option>
<option value="E">E- Tidal action</option>
<option value="F">F- Fire, affected by fire prior sampling</option>
<option value="H">H- Dambreak</option>
<option value="J">J- Storm</option>
<option value="K">K- Backwater</option>
<option value="X">X- Not applicable</option>
</select>
</div>
<div class="ui-grid-a">
<label for="containerCuantity">Add a group of single container or sets of multiple samples: </label>
<div class="ui-block-a">
<input type="number" min="1" value="1" max="40" id="containerCuantity" name="containerCuantity" onBlur="storeData(this.id,this.value)"/></div>
<div class="ui-block-b">
<select id="singleMultiContainer" name="singleMultiContainer" onChange="storeData(this.id,this.value)">
<option value="" selected>--Select Container or Set--</option>
<option value="single">Single container sample</option>
<option value="multi">Multiple sets container</option>
</select>
</div>
</div>
<input id='addSampleParameters'type="submit" value="Next"/>
</form>
</div>
<div data-role="footer" data-position="fixed">
<div data-inline="true" data-type="horizontal"><a href="#" data-icon="bars" data-iconpos="notext" data-inline="true" data-mini="false" data-role="button">Menu</a><a id="addSampleParameters" data-icon="arrow-r" data-iconpos="right" data-inline="true" data-role="button" data-mini="false" data-theme="e">Next</a>
</div>
</div>
</div>
The js:
$('#page2').bind('pageinit',function(){
$('#sampleProperties').validate({
rules:{
station: 'required',
date: 'required',
singleMultiContainer: 'required',
containerCuantity:{
required:'true',
minlength:1,
maxlength:40
}
},
submitHandler: function(form) {
alert('Success!');
}
});
});
解决方案
There are various approaches to stepped forms.
When I create multi-step forms, I use a unique set of <form> tags for each section. Then I use the .valid() method to test the section before moving to the next. (Don't forget to first initialize the plugin; call .validate(), on all forms on DOM ready.)
Then on the last section, I use .serialize() on each form and concatenate them into a data query string to be submitted.
Something like this...
$(document).on('pageinit', function() { // dom ready handler for jQuery Mobile
$('#form1').validate({ // initialize form 1
// rules
});
$('#gotoStep2').on('click', function() { // go to step 2
if ($('#form1').valid()) {
// code to reveal step 2 and hide step 1
}
});
$('#form2').validate({ // initialize form 2
// rules
});
$('#gotoStep3').on('click', function() { // go to step 3
if ($('#form2').valid()) {
// code to reveal step 3 and hide step 2
}
});
$('#form3').validate({ initialize form 3
// rules,
submitHandler: function (form) {
// serialize and join data for all forms
var data = $('#form1').serialize() + '&' + $('#form2').serialize() + '&' + $(form).serialize()
// ajax submit
return false; // block regular form submit action
}
});
// there is no third click handler since the plugin takes care of this
// with the built-in submitHandler callback function on the last form.
});
Important to remember that my click handlers above are not using type="submit" buttons. These are regular buttons, either outside of the form tags or type="button".
Only the button on the very last form is a regular type="submit" button. That is because I am leveraging the plugin's built-in submitHandler callback function on only the very last form.
"Proof of Concept" DEMO: http://jsfiddle.net/8bnZV/
BTW, notice how I replaced your outdated .bind() with the more modern .on() method.
Also, see for reference:
https://stackoverflow.com/a/17975061/594235
这篇关于如何验证表单而无需提交并转到其他页面使用jquery mobile和Jquery验证？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
