Question

I’m having a little problem with a validation thing in javascript.

<form action="insert.php" id="form" name="form" method="post" 
    onSubmit="return validate()">
    <pre>
        Vul hier de/het E-mail adres(sen) in
        <textarea name="email" rows="5" cols="50"></textarea><br>
        Typ hier de E-mail
        <textarea name="text" rows="5" cols="50"></textarea><br>
        <input type="submit" name="Submit" value="Submit">
    </pre>
</form>

As you can see here, I’ve got two textareas. In the upper one, you’re supposed to enter one or multiple email addresses underneath eachother, and in the bottom textarea you’re supposed to compose the email itself. Then, when you click on submit, it’ll send the email to all those specified email addresses.

Now, I’ve made a validation for both textareas:

function explodeArray(emailID, delimiter) {
    tempArray = new Array(1);
    var Count = 0;
    var tempString = new String(emailID);

    while (tempString.indexOf(delimiter) > 0) {
        tempArray[Count] = tempString.substr(0, tempString.indexOf(delimiter));
        tempString = tempString.substr(
            tempString.indexOf(delimiter) + 1, 
            tempString.length - tempString.indexOf(delimiter) + 1
        );
        Count = Count + 1
    }

    tempArray[Count] = tempString.replace("\r", "");
    return tempArray;
}

function validate() {
    var emailID = document.form.email;
    var delimiter = "\n";
    var emailArray = explodeArray(emailID.value, delimiter);
    var textID = document.form.text;
    var length = emailArray.length,
        element = null;
    for (var i = 0; i < length; i++) {
        emailVar = emailArray[i];

        if (emailVar == null) {
            alert("Email-adres bestaat niet")
            emailID.focus()
            return false
        }
        if (emailVar == "") {
            alert("Email-adres veld is leeg")
            emailID.focus()
            return false
        }
        if (checkEmail(emailVar) == false) {
            emailVar.value = ""
            alert("Ongeldig E-mail adres");
            emailVar.focus()
            return false
        }
    }
    if ((textID.value == null) || (textID.value == "")) {
        alert("E-mail textveld is leeg")
        textID.focus()
        return false
    }
    document.getElementById("form").submit();
    return true
}

function checkEmail(hallo) {
    if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(hallo)) {
        return true
    }
    return false
}

(I probably copied lots of irrelevant code as well, sorry for that, just copied the whole thing just in case…)

Now what does work is:

-it won’t submit when both textareas are empty;

-it won’t submit when the email addresses are valid but the bottom textarea is empty;

What doesn’t work is:

-the form still submits when the email addresses are invalid, even when the bottom textarea is still empty.

I’ve been trying to figure out for hours what could possibly be wrong here, I googled and checked stackoverflow, but I really could not find anything. Could anybody tell me what I’m doing wrong here?

Thanks in advance.

Answer 1

You were using emailVar.focus(); which won’t execute.

Here, fixed: Live Demo

if (checkEmail(emailVar) == false) {
    alert("Ongeldig E-mail adres");
    emailID.focus();
    return false;
}