当我在jquery mobile framework中提交表单时，它会返回first page (#page)，在这种情况下我的菜单！我正在使用jquery form validation plugin。
完成所有form validation后，我需要它来显示alert box。目前，当所有data都正确无误时，我点击submit它将返回主页并且什么都不做。但是，如果我refresh主页，那么它会显示alert box ("all good") ...奇怪，我知道！
我到处寻找，我找不到任何可以解决问题的方法，我尝试添加method='post'，但所有操作都显示error loading page并且什么都不做
<form id='valForm'>
<!-- Name, Age -->
<div data-role="fieldcontain">
<label for="txtNamev">Name:</label>
<input type="text" name="txtNamev" id="txtNamev" value="" />
</div>
<div data-role="fieldcontain">
<label for="numAgev">Age:</label>
<input type="number" name="numAgev" id="numAgev" value="" />
</div>
<!-- Sex, Default value = Male-->
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>Sex</legend>
<input type="radio" name="sexv" id="sex_malev" value="Male" />
<label for="sex_malev">Male</label>
<input type="radio" name="sexv" id="sex_femalev" value="Female" checked='checked' />
<label for="sex_femalev">Female</label>
</fieldset>
</div>
<!-- Emails -->
<div data-role="fieldcontain">
<label for="txtEmailv">e-mail:</label>
<input type="email" name="txtEmailv" id="txtEmailv" value="" />
</div>
<div data-role="fieldcontain">
<label for="txtEmailv1">Confirm e-mail:</label>
<input type="email" name="txtEmailv1" id="txtEmailv1" value="" />
</div>
<!-- Interest In checkboxes -->
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>I am interested in the following</legend>
<input type="checkbox" name="interestv[]" value='Comet' id="interest_0v" class="custom" value="" />
<label for="interest_0v">Comet</label>
<input type="checkbox" name="interestv[]" value='Common Goldfish' id="interest_1v" class="custom" value="" />
<label for="interest_1v">Common Goldfish</label>
<input type="checkbox" name="interestv[]" id="interest_2v" class="custom" value="Black Moor" />
<label for="interest_2v">Black Moor</label>
<input type="checkbox" name="interestv[]" value='Celestial Eye' id="interest_3v" class="custom" value="" />
<label for="interest_3v">Celestial Eye</label>
<input type="checkbox" name="interestv[]" value='Fantail' id="interest_4v" class="custom" value="" />
<label for="interest_4v">Fantail</label>
<input type="checkbox" name="interestv[]" value='Lionchu' id="interest_5v" class="custom" value="" />
<label for="interest_5v">Lionchu</label>
<input type="checkbox" name="interestv[]" value='Other' id="interest_6v" class="custom" value="" />
<label for="interest_6v">Other</label>
</fieldset>
</div>
<div data-role="fieldcontain" class='display'>
<label for="txtVariety">Fish Varieties:</label>
<textarea cols="40" rows="8" name="txtVariety" id="txtVariety"></textarea>
</div>
<p id='checkboxError'></p>
<!-- Text Area - Fish Varieties -->
<!-- Drop down select menu - How did u hear about us -->
<div data-role="fieldcontain">
<label for="selectmenu" class="select">How did you hear about us?:</label>
<select name="selectmenu" id="selectmenu" multiple='multiple' data-native-menu='false'>
<option disabled='disabled' value='Pick one or more options' id='selectChecked'>Pick one or more options</option>
<option value="Internet">Internet</option>
<option value="Email">Email</option>
<option value="Friend">Friend</option>
<option value="Billboard">Billboard</option>
<option value="Other">Other</option>
</select>
</div>
<!-- Register & Start again buttons -->
<input type="submit" id='submitv' value="Register"/>
<input type="submit" id='resetFormv' value="Start Again" />
</form>
<!-- Print out the details -->
<div id='printDetails'></div>
</div>
<div data-role="footer">
<h4>James Wainwright</h4>
</div>
</div>
##jQuery
$(document).ready(function() {
var ok = false;
$("#errorBox").hide();
var validForm = $("#valForm").validate({
errorContainer:"#errorBox",
errorLabelContainer:"#errorBox ul",
wrapper:"li",
rules:{
txtNamev:{
required:true,
minlength:5,
//noAnon:true
},
numAgev:{
required:true,
},
txtEmailv:{
required:true,
email:true
},
txtEmailv1:{
required:true,
email:true,
equalTo:"#txtEmailv"
},
'interestv[]':{
required:true,
minlength: 1
}
},
messages:{
txtNamev:{
required:"Your name must be more than 5 characters",
minlength:jQuery.format("You need at least {0} characters for your name")
},
numAgev:{
required:"Please enter an age"
},
txtEmailv:{
required:"You must enter an E-mail Address"
},
txtEmailv1:{
required:"Please confirm your email",
equalTo: "The email must match the above"
},
'interestv[]':{
required:"Check atleast one checkbox"
}
}
});
if(validForm.form())
{
alert("All is good");
}
/*Please take note that my checkbox validation is working, if you click on one and click submit the message will go away
But please click submit without checking all the other buttons, as the form will just loop to the homepage
*/
});
答案 0 :(得分：1)
您不会阻止表单提交。您有错误检入，但是您没有告诉浏览器实际上没有提交表单。因此它提交，并且由于您没有操作，它将返回到您网站的初始页面。您需要通过使用e.preventDefault（）;来阻止表单处理程序中的默认行为; （确保将e定义为事件参数）或返回false。
好的，一般来说，你可以像这样收听一个表格帖子（假设你对你的表格标签做了id =“mainForm”）：
$("#mainForm").on("submit", function(e) {
e.preventDefault(); //dont let the form submit
//this is where you do stuff like, check the form, and then possibly POST it via XHR
//when done, you have to do something, like alert('dude im done!') or use
// jQM's changePage API to go to a 'done' type page
}