Email validation

JavaScript
1

Hi,

I’ve written this to validate the email, but’s not working.


function main(){
    document.getElementById("contactform").onsubmit = validate; 
    document.getElementById("email").onblur = validateEmail; 
}

function validate() {
    return false; 
}

function requiredField() () {
    
    
}



function validateEmail(){
    var email = document.getElementById("email");
    var emailRegEx = /^[\\w\\.\\-]+@([\\w\\-]+\\.)+[a-zA-Z]+$/;
    if (!emailRegEx.test(email.value)) {
        var errorEmail = document.getElementById("errorEmail");
        errorMail.innerHTML = "* Please write a valid email. "
        return false; 
    } else {
    return true;
    }    
   
}
 	   
    
    
}

function validate zhaNumber() {
    
    return result; 
}

function focusName(){
    
    
}

function defaultText(){
    
}



function wipePlaceholder(){
    
    
}

window.onload = main;

Here’s the form:


<body>
<h1>Contact Form</h1>
    <!-- Turn HTML5 validation off to test Javascript data validation -->
    <form id="contactform" action="#" method="post" novalidate>
        <p><i>Please complete the form. Mandatory fields are marked with a </i><em>*</em></p>
        <!-- Patient's name -->
        <fieldset>
            <legend>Patient's Name</legend>
            <p><label for="name">First Name <em>*</em></label>
                <input id="name" required>
                <span id = "nameHint" class="errorMessage"></span></p>
            <p><label for="surname">Last Name <em>*</em></label>
                <input id="surname" required>
                <span id = "surnameHint" class="errorMessage"></span></p>
            <p><label for="title">Title <em>*</em></label>
                <select id="title"  required>
                <option value="">Please select</option>
                <option value="mr">Mr.</option>
                <option value="ms">Ms.</option>
                <option value="mrs">Mrs.</option>
                <option value="miss">Miss.</option>
                <option value="master">Master.</option>
                </select><br>
                <span id = "titleHint" class="errorMessage"></span></p>
        </fieldset>
        <!-- Contact details -->
        <fieldset>
            <legend>Contact Details</legend>  
            <p><label for="telephone">Telephone</label>
                <input id="telephone">
                <span id = "telephoneHint" class="errorMessage"></span></p>
            <p><label for="email">Email <em>*</em></label>
                <input id="email" type="email" required>
                <span id = "errorEmail" class="errorMessage">* Please enter a valid email</span></p>   
        <!-- Health Number -->
        <fieldset>
            <legend>Health Information</legend>
            <p><label for="health-number">Health Authority Number <em>*</em></label>
                <input id="health-number" type="alphanumeric" min="0" max="120" step="0.1" required>
                <span id = "healthNumberHint" class="errorMessage"></span></p>
        </fieldset>
        <p><input type="submit" value="Submit" id=submit></p>
    </form>


</body>

And in the CSS I have:


.errorMessage {
  color: red;
  font-size: 15px;
   padding-left: 1em;
  display: none; 
}

Here’s the demo:

I’m learning Javascript and I appreciate your help.

Thanks.

2

Let’s make this a free lesson in Javascript debugging. Open the page (not the Fiddle) in Firefox with Firebug installed, or in Chrome. Press F12, click ‘Console’ and then ‘All’ or ‘Errors’, if that tab is not yet selected. Reload the page. Correct any errors you see in the console, save and reload, and tell me what the console reports next, if anything.

3

F12 is the volume in Mac. I press cmd + alt + i to open the console. Then can type there. I don’t now where the errors are.

4

Don’t have a mac, but once opening your console have you tried hitting refresh?

function requiredField() B[/B] {

Not sure what’s going on with your email regex.

For instance

name@something.co.uk

will capture ‘co.’ Is that intentional?

If you want a non capturing group you can use (?:[\w\-]+\.) instead.

Another option perhaps? var emailRegEx = /[1]+@[\w\.\-]+$/;

  1. \w\+\.\- ↩︎

5

If I go to Chrome i get: uncaught reference error. Invalid left hand side in assignment. But don’t know what that is.

6

Well Firebug came up with

SyntaxError: syntax error
function requiredField() (){
-------------------------------^

and Chrome

Uncaught SyntaxError: Unexpected token (

7

The code is looking like this now, but doesn’t work yet:



function main(){
    document.getElementById("email").onblur = validateEmail;
    document.getElementById("healthNumber") = validateHealthNumber; 
}

function validateEmail(){
    var emailRegEx = /^[\\w\\+\\.\\-]+@[\\w\\.\\-]+$/;
    if (emailRegEx.test(email.value) != true) {
        var errorEmail = document.getElementById("errorEmail");
        errorEmail.innerHTML = "* Please write a valid email."; 
        return false; 
    } else {
    return true;
    }       
}

 
function validateHealthNumber(){
    var zhaNumberRegEx = /^[A-Z]{3}\\d{6}/; 
    if (zhaNumberRegEx.test(zhaNumber.value) != true) {
        var errorHealthNumber = document.getElementById("errorHealthNumber");
        errorHealthNumber.innerHTML = "* Please write a valid health number."; 
        return false; 
    } else {
    return true;
    }      
}

window.onload = main;

I have updated the demo: http://jsfiddle.net/Assembly21/LL8qa/7/

8

validate email is working now. the error was in the CSS error messsage display none.
And a missing onblur in the main function.
Here’s demo: http://jsfiddle.net/Assembly21/LL8qa/10/
thanks a lot.

9

Forms aren’t my forte, so others here maybe able to offer better advice. A few of suggestions anyway.

email.value will fail in IE. I’m surprised it worked at all actually as you haven’t defined email as far as I can see. Maybe I’m missing something.

So I think you would be better off passing ‘this’ to the validation functions.

function main(){
document.getElementById(“email”).onblur = function(){ validateEmail(this); };
document.getElementById(“healthNumber”).onblur = function(){ validateHealthNumber(this); };
}

With regard your validation you are going to want to clear the error message if the entry is correct.

function validateEmail(email){

    var emailRegEx = /^[\\w\\+\\.\\-]+@[\\w\\.\\-]+$/,
        errorEmail = document.getElementById("errorEmail");
    
    if (emailRegEx.test(email.value) !== true) {
        errorEmail.innerHTML = "* Please write a valid email."; 
        return false; 
    } else {
        errorEmail.innerHTML = "";
        return true;
    }       
}

You’ll have to amend validateHealthNumber accordingly.

I see that you can include a regex in your input tag with html5

so you could use <input id=“healthNumber” … pattern = ‘[1]{3}\d{6}$’>

  1. A-Z ↩︎

10

I understand that, because unfortunately the terminology in Javascript debugging is not very intuitive, at least not in Chrome. In Firefox’s Firebug, it is much more intuitive.

However, if you would have looked on the RH side of the console, on the same line as the error report, you would have see the line nr. of the page’s code where the error was. And on that line, there indeed were two ()s. Knowing how to debug yourself is essential in writing JS, that’s why I didn’t give you the solution directly.