[英]How to make Submit buttom to work only if email field is filled?
我有订阅表格的模态窗口。
如何检查输入字段是否已填充(如果已填充),则如何用php发送信息,否则在<p class="alert-message"></p>
显示消息?
现在,即使输入字段为空,单击提交后它也会关闭窗口。
<div class="modal fade" id="subscription">
<div class="modal-dialog modal-dialog-subscription">
<div class="modal-content modal-content-subscription">
<div class="modal-body modal-body-subscription row">
<div class="col-md-7">
<img src="/image/subs1.jpg" width="100%">
</div>
<div class="col-md-5">
<h3 class="h3-subscription">Pls subsribe!</h3>
<p class="p-subscription">Sample text</p>
<p class="p-subscription">Sample text:</p>
<form>
<div class="form-group">
<input type="email" class="form-control input-email" name="input-email" id="input-email" required="required">
<p class="alert-message"></p>
</div>
<button class="btn btn-shopping-cart pull-right" id="subscribe_button"><span>Subsribe</span></button>
<button class="button btn btn-theme-default pull-left" data-dismiss="modal">Cancel</button>
</form>
</div>
</div>
</div>
</div>
</div>
它仅适用于新访客(1天的cookie)
<script type="text/javascript">
$(window).load(function(){
if ( ! $.cookie('cookieExist') ) {
$.cookie('cookieExist', true, { expires: 1 });
setTimeout(function(){
$('#subscription').modal('show');
},5000);
}
});
</script>
<script>
$(document).ready(function(){
$("#subscribe_button").click(function() {
var email = $(".input-email").val();
$.ajax({
type: "POST",
url: "/subscribe.php",
//data: form_data,
data: {email: email},
success: function() {
$('.modal-body-subscription').html("<div class='successfully-subscribed' style='margin-bottom: 15px;'>");
$('.modal-body-subscription > .successfully-subscribed').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true' style='font-family: Geneva, Arial, Helvetica, sans-serif;'>×")
.append( "</button>");
$('.modal-body-subscription > .successfully-subscribed').append("<h1 class='text-center'>Thanks</h1>");
$('.modal-body-subscription > .successfully-subscribed').append('</div>');
},
error: function() {
// Fail message
$('.modal-body-subscription').html("<div class='not-subscribed'>");
$('.modal-body-subscription > .not-subscribed').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true' style='font-family: Geneva, Arial, Helvetica, sans-serif;'>×").append( "</button>");
$('.modal-body-subscription > .not-subscribed').append("<h1>Oops!</h1>");
$('.modal-body-subscription > .not-subscribed').append('</div>');
}
});
});
});
</script>
这仅适用于html5。
所以这是在HTML5中添加的
<input type="email" class="form-control input-email" name="input-email" id="input-email" required="required">
请检查您的浏览器是否可以使用HTML5压缩,如果可以,则将不提交您的表单,因为它是表单中的必填字段
尝试以下
if (!email) {
// then email value is empty, display error message
$(".alert-message").show(); // if is hidden
return false;
} else {
// send data to server
}
首先检查表单是否为空,如果不继续使用Ajax,否则将错误消息发布到表单。
要对此进行归档,请创建一个函数来验证输入是否为空。 我正在根据您的代码进行调整
$(document).ready(function () {
$("#subscribe_button").click(function () {
$(this).button('loading');
var email = $(".input-email").val();
/**
* Validate the form
*/
if (email === '' || !email) {
$('.alert-message').append('Email is required').show();
} else {
$.ajax({
type: "POST",
url: "/subscribe.php",
//data: form_data,
data: {email: email},
success: function () {
$('.modal-body-subscription').html("<div class='successfully-subscribed' style='margin-bottom: 15px;'>");
$('.modal-body-subscription > .successfully-subscribed').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true' style='font-family: Geneva, Arial, Helvetica, sans-serif;'>×")
.append("</button>");
$('.modal-body-subscription > .successfully-subscribed').append("<h1 class='text-center'>Thanks</h1>");
$('.modal-body-subscription > .successfully-subscribed').append('</div>');
},
error: function () {
// Fail message
$('.modal-body-subscription').html("<div class='not-subscribed'>");
$('.modal-body-subscription > .not-subscribed').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true' style='font-family: Geneva, Arial, Helvetica, sans-serif;'>×").append("</button>");
$('.modal-body-subscription > .not-subscribed').append("<h1>Oops!</h1>");
$('.modal-body-subscription > .not-subscribed').append('</div>');
}
});
}
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.