HTML5必需的属性不适用于AJAX提交
保罗
我正在尝试对仅具有电子邮件的简单新闻稿表单进行一些基本验证。我在页面中使用此表单/输入的方式，实际上没有空间添加任何jQuery验证错误消息，因此我试图添加一个简单的HTML 5 required属性，但是无论是否为空白，表单都将提交。
为该表单添加一些简单验证的最佳方法是什么，以便该表单检查电子邮件地址，该地址是否已填写以及最小长度为4个字符？
<form action="" method="POST" id="newsletter-form">
<input type="email" id="footer-grid1-newsletter-input" placeholder="Your Email Address" required>
<input type="submit" id="footer-grid1-newsletter-submit" name="submit" value=' '>
</form>
$("#footer-grid1-newsletter-submit").on("click", function (event) {
event.preventDefault();
var newsletter_email = $("#footer-grid1-newsletter-input").val();
var targeted_popup_class = jQuery(this).attr('data-popup-open');
$.ajax({
url: "newsletterSend.php",
type: "POST",
data: {
"newsletter_email": newsletter_email
},
success: function (data) {
// console.log(data); // data object will return the response when status code is 200
if (data == "Error!") {
alert("Unable to insert email!");
alert(data);
} else {
$("#newsletter-form")[0].reset();
$('.newsletter-popup').fadeIn(350).delay(2000).fadeOut();
}
},
error: function (xhr, textStatus, errorThrown) {
alert(textStatus + " | " + errorThrown);
//console.log("error"); //otherwise error if status code is other than 200.
}
});
});
罗里·麦克罗森（Rory McCrossan）
原因是因为验证是submit在表单事件上完成的，但是您已经将事件与单击提交按钮挂钩。试试这个：
$("#newsletter-form").on("submit", function (event) {
event.preventDefault();
// your code...
});
关于验证最小输入长度，可以使用以下pattern属性：
<input type="email" id="footer-grid1-newsletter-input" placeholder="Your Email Address" pattern=".{3,}" required>
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
HTML5音频的playingRate属性不适用于移动浏览器？
- 2
Javascript函数不适用于html5 + Flask
- 3
材料 ui TextField 中的必需属性不适用于提交
- 4
JS元素属性设置不适用于HTML 5
- 5
AngularJS必需的属性不适用于选择
- 6
必需属性不适用于外键下拉列表
- 7
HTML 必需标签不适用于公司和名称
- 8
样式不适用于HTML5自定义元素
- 9
HTML5视频播放不适用于Safari（Mac和iOS）
- 10
localStorage 不适用于 html5 中的所有字段？
- 11
提交按钮不适用于html代码
- 12
HTML5必需的input属性使我可以提交表单
- 13
HTML onchange属性不适用于select元素
- 14
HTML表单不适用于PHP，Ajax请求
- 15
表单提交不适用于jQuery
- 16
表单提交不适用于jQuery
- 17
CSS 不适用于提交的输入
- 18
表单提交不适用于validationSchema
- 19
带有Backbone.js路由器的HTML5 pushState不适用于特定服务器，但适用于其他服务器
- 20
通过CSS和数据字段的HTML5工具提示适用于链接，但不适用于图像
- 21
可折叠 HTML5 <detail><summary> 适用于 FF 和 Chrome，但不适用于 IE 和 Edge
- 22
HTML 5模式不适用于按钮的onclick事件
- 23
动态HTML 5菜单不适用于回发
- 24
路由不适用于 HTML5-History-API
- 25
[Safari / Chrome致命错误] HTML5画布不适用于特定情况，但Firefox效果很好
- 26
错误处理不适用于Chrome中的HTML5地理位置
- 27
跨浏览器的HTML5视频兼容性不适用于多种视频格式
- 28
KdB +-HTML5 websocket反序列化器不适用于Long数据类型
- 29
HTML5图像预览不适用于克隆的文件输入（在原始文件上可以使用）
我来说两句