User Input validation routine behaves strange

Question

I have a small question regarding user input validation using JavaScript.

The following is the code that I wrote. It's working when this code does not have the 2nd validation. When I include the 2nd validation, even the first validation does not work.

Forget about that www.bbc.co.uk that I mentioned.

<!DOCTYPE html>
<html>
<head>
<script>

function validateForm() {
    /* first validation */
    var eml = document.forms["myForm"]["email"].value;
    if (eml == null || eml == "") {
        alert("Email Address must be filled out");
        return false;
    }

    /* second validation */
    var reg = /^([A-Za-z0-9._-])+@[A-Za-z0-9.-])+\.([A-Za-z]{2,4})$/;
    if (reg.test(document.forms["myForm"]["emaill"].value) == false) {
        alert("Invalid Email - Reg Function");
        document.getElementById("email").focus();
        return false;
    }
}

</script>
</head>

<body>
<form name="myForm" action="www.bbc.co.uk" onsubmit="return validateForm()" method="post">
    Email Address: <input type="text" name="email">
    <input type="submit" value="Submit">
</form>
</body>

</html>

score 3 · Answer 1 · answered May 07 '13 at 22:34

You misspelled "email" in this line:

if (reg.test(document.forms["myForm"]["emaill"].value) == false)

There's no reason to re-fetch the value from the DOM anyway; you already did that earlier in the function.

if (!reg.test(eml))

is enough. It's generally a bad idea to compare explicitly to boolean constants. It's not necessarily wrong, but it's rarely necessary and it can cause strange things to happen if you're not used to the language.

score 3 · Accepted Answer · edited May 23 '17 at 10:32

There are more than just typo issues with your code. I semi-rewrote your function and here is a brief explanation on what I did.

Before, you were returning false twice, but never returning true. For onSubmit() to work, you have to return one of the two. You should create a flag variable and set it initially to false. Once all the criteria have been met for validation, then set it to true. At the end of the function, return flag.

Secondly, you were trying to grab email by it's id to set focus() on it, even though it didn't have an id set. For that, just set the form element to a variable and then set the elements value to a different variable so during the course of the function you have access to both (eml and emlVal)

Thirdly, your regex was invalid. The regex shown here was pulled from here: Validate email address in JavaScript?

Also, you should think twice about using it as that regex may not be RFC compliant: Using a regular expression to validate an email address

Fourthly, email was being grabbed incorrectly from the DOM. You misspelled email in one portion of the code. To grab the element you need var eml = document.myForm.email. This will give you the email input element and then you can grab it's value with eml.value.

Lastly, unless I forgot something, the logic on the initial if...else should be && (and) not an || (or)

function validateForm() {
    var flag = false;
    /* first validation */
    var eml = document.myForm.email;
    var emlVal = eml.value;
    if (emlVal !== null && emlVal !== "") {
        var reg =/^(([^<>()[\]\\.,;:\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,}))$/;
        if (!reg.test(emlVal)) {
            alert("Invalid Email - Reg Function");
            eml.focus();
        }
        else {
            flag = true;
        }
    }
    else {
        alert("Email is required");
    }
    return flag;

    /* second validation */
}

jsFiddle

Hi Christopher, Really appreciate your detailed explanation. Thanks a lot. Your explanation really helped me a lot since I am new to web development. I just moved into web development from IBM iSeries. Thanks again. — Isaac, May 08 '13 at 14:47

score 1 · Answer 3 · answered May 07 '13 at 22:34

1

You have a typo: correct emaill to email.

answered May 07 '13 at 22:34

Stefano Sanfilippo

32,265
7
79
80

User Input validation routine behaves strange

3 Answers3

jsFiddle