Why is my Javascript form validation not working properly?

Question

Why is my validation failing on second attempt here? On first attempt the validation works fine, but on the second run, it will accept inappropriate values in the email field. The first two fields work fine, but the third field will accept any text after the first run. However it only validates if I change the value in the email field, otherwise it will keep displaying the error and failing to validate like it should.

function validate(){

    clearErrors();

    var errorFlag = true;

    var name = document.getElementById("name");

    nameVal = name.value;

    if(nameVal.length === 0){

        var nameError = document.getElementById("nameError");

        nameError.style.display = "block";

        errorFlag = false;
    }

    var phone = document.getElementById("phone")

    var phoneVal = phone.value;

    if(isNaN(phoneVal) || (phoneVal < 1000000000 || phoneVal >10000000000)){

        errorFlag = false;

        var phoneError = document.getElementById("phoneError");

        phoneError.style.display = "block";
    }



    var email = document.getElementById("email");

    var emailVal = email.value;

    var reStr = "^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$";

    if((reStr.match(emailVal))){

        errorFlag = false;

        var emailError = document.getElementById("emailError");

        emailError.style.display = "block";
    }

    return errorFlag;
}

function clearErrors(){

    var nameError = document.getElementById("nameError");

    nameError.style.display = "none";

    var phoneError = document.getElementById("phoneError");

    phoneError.style.display = "none";

    var emailError = document.getElementById("emailError");

    emailError.style.display = "none";

}

clear error method is simply making the style to none and not making values reset. — GustyWind, Apr 22 '16 at 03:44
I'm not quite sure what you mean. The only purpose of clearErrors is to hide the error messages on the second run. Shouldn't the values of the vars be set again every time the script runs? — Bottlecaps, Apr 22 '16 at 03:46
Can I suggest to put the regex to the 'pattern' attribute of the element? — Alexiy, Apr 22 '16 at 03:48
Your email validator is a string, not a regex. You need `/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i`, or `new RegExp("^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$", "i")` if want to use a string. — Alexander O'Mara, Apr 22 '16 at 03:50
I was taught to put the regex into a string before using .match(). How should i use it instead? — Bottlecaps, Apr 22 '16 at 03:51
Just caught something, should I be looking for does not match instead of match. — Bottlecaps, Apr 22 '16 at 04:09

Alexander O'Mara · Accepted Answer · 2016-04-22T04:28:46.777

2

Your validator will fail on the email, because you are feeding a string to .match, when it needs a regex.

You also have to call .match on the email itself, with the regex as the argument.

You also need to negate the return value to check if it does not match, or use .test.

This bit:

var reStr = "^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$";
if((reStr.match(emailVal))){

Should be replaced with:

var re = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i;
if(!emailVal.match(re)){

Of if you can't use a regex literal for some reason:

var re = new RegExp("^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$", "i");
if(!emailVal.match(re)){

Or using .test instead of .match:

var re = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i;
if(!re.test(emailVal)){

Note the i for case-insensitive matching, so emails don't have to be entered in all-caps.

edited Apr 22 '16 at 04:28

answered Apr 22 '16 at 03:54

Alexander O'Mara

58,688
18
163
171

So using both fixes, the form automatically submits no matter if there are errors on the first two inputs. I'm assuming there's something else here that I've messed up. – Bottlecaps Apr 22 '16 at 03:57
@Spork Sorry, I missed that you were calling match on the regex, not the string, see the updated answer. – Alexander O'Mara Apr 22 '16 at 04:00
I think the problem here is the behavior being different on the second run, not the validation. – Frederik.L Apr 22 '16 at 04:01
2

@Spork I just realized, you also need to negate the match for the `if` to be the failing case. Edit: Oh, looks like you just caught that too. :) – Alexander O'Mara Apr 22 '16 at 04:12
Yeah, that was a dumb miss by me – Bottlecaps Apr 22 '16 at 04:13
I just gave up and used /@/, works fine, I'll probably get dinged for that but I can live with it at this point. – Bottlecaps Apr 22 '16 at 04:13
Thanks for catching the backwards .match and the missing ! – Bottlecaps Apr 22 '16 at 04:16
`re.test(emailVal)` is better. Also phone number consists of digits but isn't a number. – Alex Kudryashev Apr 22 '16 at 04:26
@AlexanderKudryashev Yeah, I added `.test` as an alternative. I'll leave phone number validation technique correction for the OP if they need it. Technically the email validator isn't perfect either. – Alexander O'Mara Apr 22 '16 at 04:29
Standard regex for email looks like this: `/^\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/` – Alex Kudryashev Apr 22 '16 at 04:39

Why is my Javascript form validation not working properly?

1 Answers1