Email Validation

HTML5

All latest browsers know to handle the HTML5 email field. The browser gives an error message when an invalid email address entered.

<form>
<input type="email" />
<button>Validate</button>
</form>

Javascript

With javascript email validation can happen before submitting the form. Alert will appear if invalid email address entered.

<!-- HTML markup -->
<form>
<input type="text" id="email" />
<button type="button" onClick="validate()">Validate</button>
</form>

<!-- Javascript -->
<script type="text/javascript">
function validate(){
    var email = document.getElementById('email').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 email!');
	}
}
</script>

PHP

It is important, not to rely on the client side HTML, Javascript. You must validate email after submission with PHP.

<?php

// After submission
if( isset($_POST[email])){
	
	// Filter
	$correct = preg_match("/^[_a-z0-9-]+(.[_a-z0-9-]+)*@[a-z0-9-]+(.[a-z0-9-]+)*(.[a-z]{2,3})$/i", $_POST[email]);

	// Valid email
	if( $correct ) {
		echo '<p>'.$_POST[email].' is valid email!</p>';
	} else {
	// Invalid email
		echo '<p>'.$_POST[email].' is an invalid email!</p>';
	}	
}

// Form
echo '
<form method="post" action="email-validation.php">
<input type="text" name="email" />
<button>Validate</button>
</form>';

?>

All in One

In this script HTML5, Javascript on client side and PHP on server side both validates email.

<?php

// After submission
if( isset($_POST[email2])){
	
	// Filter
	$correct = preg_match("/^[_a-z0-9-]+(.[_a-z0-9-]+)*@[a-z0-9-]+(.[a-z0-9-]+)*(.[a-z]{2,3})$/i", $_POST[email2]);

	// Valid email
	if( $correct ) {
		echo '<p>'.$_POST[email2].' is valid email!</p>';
	} else {
	// Invalid email
		echo '<p>'.$_POST[email2].' is an invalid email!</p>';
	}	
}

// Form
echo '
<form id="email-valid" method="post" action="email-validation.php">
<input type="email" id="email2" name="email2" />
<button type="button" onClick="validate()">Validate</button>
</form>';

?>
<!-- Javascript -->
<script type="text/javascript">
function validate(){
    var email = document.getElementById('email2').value;
    var filter = /^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})+$/;
    if (!filter.test(email)) {
		// Not valid
	    alert('Please enter a valid email!');
	} else {
		// Valid, submit form
		document.getElementById("email-valid").submit();		
	}
}
</script>

 

Demo »


Go Daddy


Related articles

Redirect www to non www with .htaccess RewriteRule

Redirect www to non www with .htaccess RewriteRule

05/12/2015

Redirect your websites visitors from www.domain.com to domain.com without www.

Unordered List Style Image CSS

Unordered List Style Image CSS

06/03/2013

Learn how to style UL with any image using CSS.

OL and UL List CSS Style

OL and UL List CSS Style

03/03/2013

Styling ordered and unordered lists is easy. Just write a single line of CSS to change the list style type.


Leave a comment

We welcome any comment from you! Please keep in mind that comments are moderated and rel='nofollow' is in use. So, please do not use a domain as your name or a spammy keyword, or your comment will be deleted.

Name: *

E-mail: *

Message: *

Click on the car *


Find us on Facebook

Tags

Get online with the world's Best - GoDaddy.com!

Back to Top