表单验证不工作在chrome和firefox
Form validation not working in chrome nor firefox
我正在处理这个联系人表单。
<form name="contact" action="mailto:me@me.com&subject=subject&body=message"
onsubmit="return validate()" method="post" enctype="text/plain">
<label for="mail">Your mail address *</label>
<input type="text" name="mail"/></br></br>
<label for="subject">Subject *</label>
<input type="text" name="subject"/></br>
<label for="message">Your message *</label>
<textarea id="txtarea" name="message" form="contact"></textarea>
<input type="submit" value="Send"/>
</form>
这个javascript
function validateMail(mail) {
var re = /^(([^<>()[']''.,;:'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,}))$/;
return re.test(mail);
}
function validate(){
var x = document.forms["contact"];
if (x[0].value == null || x[0].value == ""){
alert("Your mail address");
return false;
}else{
if(!validateMail(x[0].value)){
alert("mail address not valid");
return false;
}
}
if(x[1].value == null || x[1].value == ""){
alert("Add a subject");
return false;
}
if(x['txtarea'].value.length < 1 || x['txtarea'].value == '' || x['txtarea'].value == null){
alert("Add your message");
return false;
}
}
此代码在IE11(11.0.9600.18500)上完美工作,但chrome 54.0.2840.71 m(64位)和FF 49.0.2只是忽略我的javascript并继续发送带有空字段或无效信息的邮件。
PS:我使用id的文本区域,因为我不能找到它的形式[#]选项
编辑:我发现IE正确地识别文本区域为[object HTML TextAreaElement],但对于chrome和firefox都是未定义的
问题是你的textarea
,从它删除form="contact"
。您可以使用下面的表单-
<form name="contact" action="mailto:me@me.com&subject=subject&body=message" onsubmit="return validate()" method="post" enctype="text/plain">
<label for="mail">Your mail address *</label>
<input type="email" name="mail" /></br>
</br>
<label for="subject">Subject *</label>
<input type="text" name="subject" /></br>
<label for="message">Your message *</label>
<textarea id="txtarea" name="message"></textarea>
<input type="submit" value="Send" />
</form>
这里是为你的表单优化的Javascript函数-
function validateMail(mail) {
var re = /^(([^<>()[']''.,;:'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,}))$/;
return re.test(mail);
}
function validate() {
var x = document.forms["contact"];
if (!x[0].value) {
alert("Your mail address");
return false;
} else {
if (!validateMail(x[0].value)) {
alert("mail address not valid");
return false;
}
}
if (!x[1].value) {
alert("Add a subject");
return false;
}
if (!x['txtarea'].value) {
alert("Add your message");
return false;
}
}
使用:
if(document.getElementById('txtarea').value.length < 1 || document.getElementById('txtarea').value == '' || document.getElementById('txtarea').value == null)
代替:
if(x['txtarea'].value.length < 1 || x['txtarea'].value == '' || x['txtarea'].value == null)
因为chrome和firefox都不能正确处理表单['id']
相关文章:
- XMLHttpRequest - difference between Chrome & Firefox
- 长时间运行的脚本IE与Chrome/Firefox
- Javascript语法在Safari/Webkit中无效,在Chrome/Firefox中运行良好
- 代码在 Dreamweaver cs6 中工作,但在 chrome/firefox 中不起作用
- 在调试客户端时使用Chrome / Firefox
- Chrome/Firefox 使事件侦听器断点在停止之前跳过 jQuery 和其他库
- Chrome/Firefox 一次在所有 JavaScript onclick 事件上设置断点
- 未捕获的类型错误:无法读取IE和Chrome Firefox中未定义的属性“文档”很好
- 2D纹理渲染在Safari中闪烁,在Chrome / Firefox中很好
- 砌体JS插件 - Chrome / Firefox 问题
- Chrome/Firefox 中的 Rect 函数有什么用
- 在Chrome/Firefox中全屏按转义时未触发键下达事件
- 在PhantomJS中需要JS错误,但不是Chrome / FireFox
- Ruby Time to JavaScript Date in Chrome/Firefox
- 通过Google Chrome/Firefox Addon中的控制台访问/操作内容脚本
- 如何在Chrome/Firefox中导出ES6中的变量
- 在调用 window.location.asassigned 后,网页渲染在 chrome/firefox 之间的行为不
- 在将静态资源切换到CDN后,谷歌在Chrome+Firefox中映射错误,在Safari中很好:
- 粗体在Chrome/Firefox中太过粗体
- Chrome/Firefox中双美元符号选择器查询功能的来源是什么