表单验证在 chrome 和 firefox 中都不起作用答案

【问题标题】：Form validation not working in chrome nor firefox表单验证在 chrome 和 firefox 中都不起作用
【发布时间】：2016-10-26 15:23:43
【问题描述】：

我正在使用此联系表单。

<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 作为 textarea，因为我无法通过 form[#] 选项找到它

编辑：我发现 IE 将 textarea 正确识别为 [object HTML TextAreaElement] 但对于 chrome 和 firefox 来说都是未定义的

【问题讨论】：

您的表单名称是contact，您正在使用document.forms["contacto"];是错字吗..？那不应该是 document.forms["contact"]; ..?
也可以不使用onsubmit="return validate()"，直接使用onsubmit="validate()"。
@HimanshuAggarwal：不，你不能。如果函数返回 false，后者不会阻止表单提交。

标签： javascript jquery google-chrome firefox

【解决方案1】：

问题出在您的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;
    }
}

【讨论】：

在 3 个浏览器上完美运行。谢谢

【解决方案2】：

设法通过以下方式解决它：

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 都不能正确处理 form['id']

【讨论】：