Alberto Cortes Alberto Cortes - 1 month ago 8
jQuery Question

Form validation not working in chrome nor firefox

Im working with this contact form.

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


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


This code works perfectly on IE11 (11.0.9600.18500) but chrome 54.0.2840.71 m (64-bit) and FF 49.0.2 just ignore my javascript and proceed to send the mail with empty fields or not valid info.

PS: im using id for the textarea since i cant find it with the form[#] option

Edit: I found that IE properly identifies the textarea as [object HTML TextAreaElement] but for both chrome and firefox is undefined

Answer

The problem is with your textarea, remove form="contact" from it. You can use the below form -

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

And here is little optimized Javascript function for your 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;
    }
}