0%

Hey! Do you have any query related to front end?

Sign in Sign up

Validate email by javascript regexBack

Validating any string or value by regular expression is easy if one knows the flows of it. Regular expression short form is regex, is very powerful, which can put wonderful result in front. This is just part of it. This validation function returns true or false if email id is valid or invalid.

Validation function:

function validateEmail(email) { //Function to check email and return true ao false 
	var re = /^(([^<>()[]\.,;:s@"]+(.[^<>()[]\.,;:s@"]+)*)|(".+"))@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}])|(([a-zA-Z-0-9]+.)+[a-zA-Z]{2,}))$/;
	return re.test(email); //Returned true or false
}

Whole script

You can go through all comments next to code, mentioned in lines for deep understanding of functionality of this example.

Otherwise more concern is about "validate function" mentioned above.

//Grab the input DOM (textfield and Button) by class name
var email = document.getElementsByClassName('input');
var button = document.getElementsByClassName('button');

//Added click event to 1st position button 
button[0].onclick = function(){
	//get and checked if error already present next to button
	var error = this.nextElementSibling;
	if(error != null){
		error.remove(); //If present then remove
	}
			
	var emailVal = email[0].value; //Get email field value

	if(emailVal == "" || emailVal == " "){ //Checked empty email
		email[0].focus();
		//Checked called error message to show error
		var errorObj = errorMessage("Empty email field.");
		//Error shown on page
		this.parentElement.appendChild(errorObj);
		return false;
	}
	//Called validate email function and get in return true or false
	var result = validateEmail(emailVal);
			
	if(result == false){ //Checked for true or false
		email[0].focus();
		var errorObj = errorMessage("*Invalid email");
		this.parentElement.appendChild(errorObj);
		return false;
	}else{
		var messageSpan = document.createElement('span');
		messageSpan.className = 'message';
		messageSpan.innerHTML = 'Valid email';
		this.parentElement.appendChild(messageSpan);
	}
}

function validateEmail(email) { //Function to check email and return true ao false 
	var re = /^(([^<>()[]\.,;:s@"]+(.[^<>()[]\.,;:s@"]+)*)|(".+"))@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}])|(([a-zA-Z-0-9]+.)+[a-zA-Z]{2,}))$/;
	return re.test(email); //Returned true or false
}

function errorMessage(message){ //Defined function with dynamic message parameter
	var errorSpan = document.createElement('span');
	errorSpan.className = 'error'; //Added error class
	errorSpan.innerHTML = message; //Added error message
	return errorSpan; //Returned error object
}

How to comment:

  • Create an account in discuss by clicking on login next to arrow.
  • Create password for discuss and varify your email id, through your mail.
  • Refresh page and comment.

You might also like

  • Bubbler popup

    This bubbler effect is created by CSS3 transform

    • 297
    • 11
    • 297
    • facebook icon
    • twitter icon
    • google plus
  • Before and after vs empty tag

    Adding before and after to an non container element is no possible.

    • 7
    • 1
    • 7
    • facebook icon
    • twitter icon
    • google plus
  • Pure css3 accordion

    A pure css3 accordion which has been created by target pseudo selector.

    • 334
    • 17
    • 334
    • facebook icon
    • twitter icon
    • google plus

Latest quries posted

gopa kumarabout 3 years ago

amit singhabout 3 years ago

rahmat aliabout 3 years ago

mandavi tiwariabout 3 years ago

rahul sharmaabout 3 years ago

Ask question
Latest video
Learn Angular
Profile pic
Guest Back
Username
Password