我正在验证表单,但是当验证未通过时,它仍会发布表单。我该如何阻止这个?
<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>
答案 0 :(得分:2)
我这样做:
<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>
答案 1 :(得分:2)
您需要停止触发提交事件,或者触发提交事件时,通过在该事件上返回false而不是按钮的click事件来暂停它。您可以更改提交按钮在彩旗示例中的行为方式,或将提交事件绑定到表单本身。
<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>