[英]JQuery basic form post
我正在验证表单,但是当验证未通过时,它仍然会发布表单。 我该如何防止这种情况发生?
<form action="/Account/Registration" method="get">
<fieldset id="enterCode">
<ul>
<li class="inputBlock">
<input type="text" id="Code" name="Code" value="">
</li>
</ul>
</fieldset>
<div class="submitBlock">
<input type="submit" value="Send" class="button" onclick="validate();" />
</div>
</form>
<script type="text/javascript">
function validate() {
var val = $('#Code').val();
if (val == "") {
alert("Please enter code");
}
return false;
}
</script>
我这样做:
<form action="/Account/Registration" method="get" id="registrationForm">
<fieldset id="enterCode">
<ul>
<li class="inputBlock">
<input type="text" id="Code" name="Code" value="">
</li>
</ul>
</fieldset>
<div class="submitBlock">
<input type="submit" value="Send" class="button" id="submitButton" />
</div>
</form>
<script type="text/javascript">
$(function(){
$('#submitButton').click(function(e){
e.preventDefault();
var val = $('#Code').val();
if (val.length > 0) {
$('#registrationForm').submit();
}
});
});
</script>
您需要停止触发提交事件,或者触发提交事件时,通过在该事件上返回false而不是按钮的click事件来暂停它。 您可以更改提交按钮在bunting示例中的行为方式,或将submit事件绑定到表单本身。
<form action="/Account/Registration" method="get" id="registrationForm">
<fieldset id="enterCode">
<ul>
<li class="inputBlock">
<input type="text" id="Code" name="Code" value="">
</li>
</ul>
</fieldset>
<div class="submitBlock">
<input type="submit" value="Send" class="button" />
</div>
</form>
<script type="text/javascript">
$(document).ready(function () {
$('#registrationForm').submit(function () {
var val = $('#Code').val();
if (val == "") {
alert("Please enter code");
return false;
}
return true;
});
});
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.