How to perform Form Validation with Regular Expressions (RegEx) in JavaScript

Posted on by

How to perform Form Validation with Regular Expressions (RegEx) in JavaScript

The markup (HTML) below includes a JavaScript script tag that runs RegEx to perform Form Validation to validate:- proper Email format; proper Phone Number that has exactly 10 characters that must be digits; and Name with at least 3 characters.

 

<!DOCTYPE html>
<html>
<head>
       	<title>Form Validation with JavaScript RegEx</title>
    	<link rel="stylesheet" href="">
	<style> 
	    body{
		    font-family: sans-serif;
		    color: #333;
		}
		h1{
		    font-weight: bold;
		    margin: 20px auto;
		    text-align: center;
		    color: #00ff00;
		}
		form{
		    width: 90%;
		    margin: 20px auto;
		}
		label{
		    font-size: 2em;
		}
		input{
		    display: block;
		    padding: 8px 16px;
		    font-size: 2em;
		    margin: 10px auto;
		    width: 100%;
		    box-sizing: border-box;
		    border-radius: 10px;
		    border: 3px solid #000;
		    outline: none !important;
		}
		.submit{
		    width: 50%;
		    border-color: lightgreen;
		    color: silver;
		}
		.valid {
		    border-color: #00ff00;
		}
		.invalid {border-color:red}

		input + p {
		    font-size: 0.9em;
		    font-weight: bold;
		    margin: 0 10px;
		    text-align: center;
		    color: red;
		    opacity: 0;
		    height: 0;
		}
		input.invalid + p {
		    opacity: 1;
		    height: auto;
		    margin-bottom: 20px;
		}
	</style>
</head>
    
<body>

	<h1>Form Validation with JavaScript/RegEx</h1>

	<form action="" method="">
	    <br>
	    <label> <b> First Name: </b></label>
	    <input type="text" name="firstname" placeholder="Jane">
	    <p>Firstname must be  and contain 3 - 20 characters!</p>
	    
	    <br>
	    <label> <b> Last Name: </b></label>
	    <input type="text" name="lastname" placeholder="Doe">
	    <p>Lastname must be  and contain 3 - 20 characters!</p>
	    
	    <br>
	    <label> <b> Email Address: </b></label>
	    <input type="text" name="email" placeholder="janedoe@mailer.com">
	    <p>Email must be a valid address [username@mailer.com]!</p>
	    
	    <br>
	    <label> <b> Phone Number: </b></label>
	    <input type="text" name="phonenumber" placeholder="0123456789">
	    <p>Phone Number must have exactly 10 digits (numbers only) [0123456789]!</p>
	    
	    <input type="submit" value="SEND" name="submit" class="submit"> 
	    

	</form>

	<script>
		
		const inputs = {
		  firstname: /^[a-z\d]{3,20}$/i,
		  lastname: /^[a-z\d]{3,20}$/i,
		  phonenumber:/^\d{10}$/,
		  email: /^([a-z\d\.-]+)@([a-z\d-]+)\.([a-z]{2,8})(\.[a-z]{2,8})?$/
		}
		
		const validate = (field, regex) => {
		  regex.test(field.value) ? field.className = 'valid': field.className = 'invalid';
		}

		let keys = document.querySelectorAll('input');
		keys.forEach(item => item.addEventListener(
		  'keyup', e => {
		    validate(e.target, inputs[e.target.attributes.name.value])
		  }
		));        
	</script>
	
</body>

</html>

 

How to perform Form Validation with Regular Expressions (RegEx) in JavaScript
Websites | thetqweb