JavaScript: Form: Validating e-mail address and checking another field with Starts.With before sending

Question

I am a total JavaScript noob, but I have been searching for a solution for quite some time now and can't seem to find it.

What I want to do is: Before sending a form, check if the entered e-mail address is valid and also check if the input of the phone field starts with http://.

Validating the e-mail address is working like a charm. However, the second part isn't. The form is just sent without any alert or anything.

Can someone enlighten me? Thank you!

function validate(){
    var email = document.getElementById('email').value;
    var phone = document.getElementById('phone').value;
    var filter = /^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})+$/;

    if (!filter.test(email)) {
        alert('Please enter a valid e-mail address.');

        return false;
    }

    else if (phone.StartsWith("http://")) {
        alert('Please correct your phone number.');

        return false;
    }
}

For anyone wondering: this is supposed to be a "simple" spam blocker.

Maybe it would be even more interesting if the phone field was checked for any characters except numbers, plus, spaces, hyphens and dots...

What do you think?

Solution 1

First to answer your question:

---

Edit: Nowadays JavaScript does have a startsWith function on the String object.

---

JavaScript does not have a 'StartsWith' method on the String object. You will have to use regular expressions for this. Here's an example:

function validate() {
    var email = document.getElementById('email').value;
    var phone = document.getElementById('phone').value;

    var emailFilter = /^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})+$/;
    var phoneFilter = /^http:\/\//;

    if (!emailFilter.test(email)) {
        alert('Please enter a valid e-mail address.');
        return false;
    }

    if (!phoneFilter.test(phone)) {
        alert('Please correct your phone number.');
        return false;
    }

    return true;
}

I created a jsfiddle to show you how it works: http://jsfiddle.net/cnVQe/1/

However: it's best to use a declarative instead of a programmatic approach for validating forms. There are many tools that do this. One of them is this jQuery library that does most of the heavy listing for you: http://jqueryvalidation.org/

It works by just adding classes to to the fields and have the plugin do the checking , error displaying and preventing of form submission.

Just to add: you approach is not wrong, but if the form gets bigger and you want to check more fields you will inevitably run into complexity that has been solved over and over by other people. Even if it means that you pull in additional complexity with the extra plugin it will all be worth it as soon as you start to make the form bigger.

Also: your regular expression for the e-mail address check will not accept the + sign, which is something many people use to create special gmail accounts like [email protected]. Using libraries such as the one I describes very often have robust checks already. So that's an additional benefit on using existing libraries.

Solution 2

You need a phone number checker function to be sure that the number is correct. Here it goes : http://www.w3resource.com/javascript/form/phone-no-validation.php

Comments

[KuronosuKami]

Thank you, I will certainly keep that link in mind for future reference. However, in this case, I would like to check what a specific fields starts with, so that I can apply this to other fields as well.

[KuronosuKami]

Thank you, I will definitely have a look at that! Nevertheless, I would really like to know what is wrong with "my" code for it to not be working... I tried to put the else if into the if, but to no avail.

[KuronosuKami]

Thank you again... I admit that I am kind of confused now, though.. Is there something wrong with your jsfiddle?

[Koen Peters]

I added the wrong URL for the jsfiddle. I changed it to the correct one. Seeing that you are new to the site I'd like to add that if you think my tip was helpful then upvote it and mark it as the correct answer. People that reward helpful answers get more help when they ask future questions on stackoverflow. Cheers.

[KuronosuKami]

Hello and thank you again. Seems to be working perfectly now, very appreciated. I will still, of course, dive through the links all of you gave me and try to memorize those approaches for future cases. Thank you!

[KuronosuKami]

Based on Larry Battle's answer here I just did this: var phoneFilter = /(http:\/\/)|(www)/;... it seems to be working OK, did I do it right? :)

[Koen Peters]

I don't think so. I'd pick the one I used in my code above Yours checks for occurences of http:// or www anywhere in the string, So it will pass if the string does not start with any of the two. Compare this regexper.com/#(http%3A%5C%2F%5C%2F)%7C(www) with this regexper.com/#%5E((http%3A%5C%2F%5C%2F)%7C(www))

[KuronosuKami]

That was actually my intention by taking away the ^... i wanted it to check anywhere in the string. Thanks!