Formular-Validierung funktioniert nicht in Chrom noch Firefox

Question

Ich arbeite mit diesem Kontaktformular.

<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> 

Und 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; 
} 
} 

Dieser Code perfekt auf IE11 funktioniert (11.0.9600.18500), aber Chrom 54.0.2840.71 m (64-Bit) und FF 49.0.2 nur meinen Javascript ignorieren und fortfahren um die Mail mit leeren Feldern oder ungültigen Informationen zu senden.

PS: im für das Textfeld mit id, da ich es mit der Form [#] Option

bearbeiten finden können: Ich fand, dass der IE identifiziert richtig den Textbereich als [object HTML TextAreaElement] aber sowohl für Chrome und Firefox ist

undefined

Answer 1

Das Problem ist mit Ihrem textarea, entfernen Sie form="contact" davon. Sie können das unten stehende Formular verwenden -

<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> 

Und hier ist wenig optimierte Javascript-Funktion für Ihre form-

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; 
    } 
} 

Answer 2

es zu lösen Verwaltung mit:

if(document.getElementById('txtarea').value.length < 1 || document.getElementById('txtarea').value == '' || document.getElementById('txtarea').value == null) 

statt:

if(x['txtarea'].value.length < 1 || x['txtarea'].value == '' || x['txtarea'].value == null) 

da weder Chrom noch Firefox das Formular ['id'] richtig verarbeiten können