How to perform Form Validation with Regular Expressions (RegEx) in JavaScript
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