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?

Answer 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 john.doe+extraText@gmail.com . Using libraries such as the one I describes very often have robust checks already. So that's an additional benefit on using existing libraries.

Answer 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