使用jquery提交表单的Ajax未验证
使用jquery提交表单的Ajax未验证
提问于 2019-04-29 07:57:06
你能帮我写上面的代码吗？
I'，尝试在其中进行一些验证，但验证没有执行，并且表单在没有验证的情况下提交：
HTML：
<form method="post" action="" id="subscription-form">
<div class="form-group">
<input class="subscribe-email" type="email" name="email" placeholder="youremail@example.com" required>
<p><span class="error-message">Please enter a valid email</span></p>
</div>
<button id="" class="" type="submit"><span>Subscribe</span></button>
</form>JS：
$(document).ready(function() {
$('#subscription-form').on('submit', function (e) {
var form = $(this);
var regexEmail = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
var url = "https://mycustomapi.net";
if (!$('.subscribe-email').val().match(regexEmail)) {
$('.error-message').hide();
$.ajax({
type: "POST",
url: url,
data: form.serialize(),
success: function (data) {
$('#subscribed-error').hide()
$('#subscribed-feedback').show()
$('#subscription-form').hide()
},
error: function () {
$('#subscribed-error').show()
$('#subscribed-feedback').hide()
$('#subscription-form').show()
}
});
console.log('email submitted');
e.preventDefault();
return false;
}
else {
$('.error-message').show();
e.preventDefault();
return false;
}
});
});谢谢
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-04-29 08:13:14
你的错误是！运算符
$(document).ready(function() {
$('#subscription-form').on('submit', function (e) {
var form = $(this);
var regexEmail = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/g;
var url = "https://mycustomapi.net";
if ($('.subscribe-email').val().match(regexEmail)) {
$('.error-message').hide();
$.ajax({
type: "POST",
url: url,
data: form.serialize(),
success: function (data) {
$('#subscribed-error').hide()
$('#subscribed-feedback').show()
$('#subscription-form').hide()
},
error: function () {
$('#subscribed-error').show()
$('#subscribed-feedback').hide()
$('#subscription-form').show()
}
});
console.log('email submitted');
e.preventDefault();
return false;
}
else {
console.log("not submitted");
$('.error-message').show();
e.preventDefault();
return false;
}});
});<form method="post" action="" id="subscription-form">
<div class="form-group">
<input class="subscribe-email" type="text" name="email" placeholder="youremail@example.com" required>
<p><span class="error-message">Please enter a valid email</span></p>
</div>
<button id="" class="" type="submit"><span>Subscribe</span></button>
</form>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55895546
复制相关文章
相似问题