所以我的问题是这样的。我的电子邮件和复选框上有一些“验证”,以检查它们是否为空。这似乎可行,但在填写并检查后,我仍然收到警告消息 (.error) 弹出窗口,并且表单未提交。
我之前只使用电子邮件进行过此操作,但需要添加协议(protocol)复选框。
这是代码和一个jsfiddle .
感谢您的帮助!
html:
<form class="form" action="">
<div class="wrapper-input email">
<input id="email" type="text" name="email" placeholder="youremailaddress@example.com" />
<button class="form-submit submit">Sign-Up</button>
<div class="clear"></div>
</div>
<div class="clear"></div>
<div class="wrapper-input">
<input type="checkbox" id="terms" name="terms" value="Agree"> <span>Click to agree</span>
</div> </form> <div class="modal">
<div class="modal-title">
<h4 class="success">Submission Successful!</h4>
<h4 class="error">Submission Error!</h4>
<img class="close" src="img/close-x.png" alt="close" />
</div>
<div class="modal-content">
<p class="success">Sucess</p>
<p class="error">Error!</p>
</div> </div>
javascript:
$(document).ready(function() {
$(".submit").click(function() {
var email = $("#email").val();
var dataString = 'email='+ email;
var terms = $("input:checkbox#terms").val();
if (!terms.checked) {
$('.lk-modal').show();
$('.success').hide();
$('.error').show();
}
if (email ==='') {
$('.lk-modal').show();
$('.success').hide();
$('.error').show();
}
else {
$.ajax({
type: "POST",
url: "collect.php",
data: dataString,
success: function(){
$('.lk-modal').show();
$('.success').show();
$('.error').hide();
}
});
}
return false;
});
});
最佳答案
编辑:请先看 Stefano Dalpiaz 的回答,他会指出您的错误。
要检查一个字符串是否为空,您所要做的就是 if ( !email )
( How do you check for an empty string in JavaScript? )。您还可以使用 .is(':checked')
来确定复选框是否被选中。
这是一个有效的 fiddle :http://jsfiddle.net/p28am/1/
HTML:
<form class="form" action="">
<div class="wrapper-input email">
<input id="email" type="text" name="email" placeholder="youremailaddress@example.com" />
<button class="form-submit submit">Sign-Up</button>
<div class="clear"></div>
</div>
<div class="clear"></div>
<div class="wrapper-input">
<input type="checkbox" id="terms" name="terms" value="Agree"> <span>Click to agree</span>
</div>
</form>
<div class="modal">
<div class="modal-title">
<h4 class="success">Submission Successful!</h4>
<h4 class="error">Submission Error!</h4>
<img class="close" src="img/close-x.png" alt="close" />
</div>
<div class="modal-content">
<p class="success">Sucess</p>
<p class="error">Error!</p>
</div>
</div>
JS:
$(document).ready(function () {
$(".submit").click(function () {
var email = $("#email").val();
var dataString = 'email=' + email;
var terms = $("input:checkbox#terms").is(':checked');
if (!email || !terms) {
$('.modal').show();
$('.success').hide();
$('.error').show();
} else {
$.ajax({
type: "/echo/json/",
url: "collect.php",
data: dataString,
success: function () {
$('.modal').show();
$('.success').show();
$('.error').hide();
}
});
}
return false;
});
});
$('.close').click(function(e){
e.preventDefault();
$('.modal').hide();
});
关于javascript - 表单验证后,表单不提交,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23556021/