How to Validate Email Address in JavaScript

While developing a web page in fully HTML controls, you may not be able to use the ASP.NET's controls for example if you want some validation then you can not use the regular expression control there. So there you may need this technique for validating your HTML controls.

Using the Code

Here I will show you how to validate the HTML controls using JavaScript.

Take a text input in html and a form like this

<form action="" method="post"  name="form1" enctype="multipart/form-data" onSubmit="return validEmail()">

<input id="emailaddress" name="emailaddress" type="text"  />

And if you Want On Change Validation so just change like this:

<input  name="emailaddress"  type="text" onChange="return validEmail(this)"  />


Now when the filed is change then the JavaScript function validEmail() will be called. Now write the bellow code in this function.


function validEmail(f){

var mailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
if(document.forms["form1"]["emailadress"].value.match(mailformat))  
{  
document.form1.emailadress.focus();  
return true;  
}  
else  
{  
elem1 = document.getElementById('emailadressError');
elem1.innerHTML='Not a Valid Email'; 
return false;  
}

}

Now you have successfully validate your HTML controls through JavaScript.

JavaScript File Extension Validation

It's possible to check only the file extension, but user can easily rename virus.exe to virus.jpg and "pass" the validation.

For what it's worth, here is the code to check file extension and abort if does not meet one of the valid extensions:

function Checkfiles()
    {
        var fup = document.getElementById('fileAttach');
        var fileName = fup.value;
        var ext = fileName.substring(fileName.lastIndexOf('.') + 1);

    if(ext =="doc" || ext=="docx")
    {
        return true;
    }
    else
    {
  elem1 = document.getElementById('filetype');
  elem1.innerHTML='Not Allowed file type.';  
        return false;
    }
    }

Form should look like this:

<form ... onsubmit="return checkfiles();">

You Can use like this also if you want validate one filed of form.

<input ... onChange="return checkfiles();"/>

How to use JavaScript form submition with other function validation

If validateForm(...) and validateForm1() return a boolean (true means that no validation error occurred), then you try to do that :

function returnTrue() {
            if(validateForm1() && validateForm2 && validateForm3()) {
  document.form1.submit();
                return true;
            } else {
                document.getElementById('validation').innerHTML = 'Validation failed!';
                return false;
            }
        }

<form action=""  method="post"  name="form1" enctype="multipart/form-data" onSubmit="return returnTrue()">
First name: 
<input type="text" name="FirstName" value="Mickey"><br>
Last name: 
<input type="text" name="LastName" value="Mouse"><br>
<input type="text" name="Submit" value="Submit">

</form>