因此，我正在尝试验证一个 JQM 表单，该表单有 4 个部分并分为不同的页面，因此在验证第一部分后，如果表单有效，我想转到第二部分。我正在尝试使用 JQuery.validate 插件进行验证，但它不会以任何方式响应表单。
PS:必须带有 JQuery.validation 插件
<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>
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!');
}
});
});
最佳答案
阶梯形式有多种方法。
当我创建多步骤表单时，我使用一组独特的 <form>每个部分的标签。然后我使用 the .valid() method在进入下一个部分之前测试该部分。 (不要忘记首先初始化插件；在 DOM 上的所有表单上调用 .validate() 。)
然后在最后一部分，我使用 .serialize()在每个表单上并将它们连接成要提交的数据查询字符串。
类似这样的事情...
$(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.
});
重要的是要记住我的 click上面的处理程序没有使用 type="submit"纽扣。这些是常规按钮，位于form外部标签或 type="button" .
只有最后一个表单上的按钮是常规按钮 type="submit"按钮。那是因为我正在利用插件的内置 submitHandler仅在最后一个表单上使用回调函数。
“概念验证”演示:http://jsfiddle.net/8bnZV/
顺便说一句，请注意我如何替换您过时的 .bind()与更现代的.on()方法。
另外，请参阅引用:
关于jquery - 如何在不提交的情况下验证表单并使用 jquery mobile 和 Jquery 验证转到其他页面？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19543853/