This code snippet shows how to use JavaScript Regular Expressions to validate a form. You will find many examples in internet that uses jQuery or other frameworks to validate the form data but in this example we will use plan JavaScript.
<html>
<head>
<title>Form Validation Demo</title>
<style>
.my-form {
background: #efefef;
padding: 20px;
width:400px;
margin: 0 auto;
}
.error {
background: #e05022;
padding: 10px;
color: #fff;
display:none;
border-radius: 2px;
}
</style>
<script type="text/javascript">
// Script here..
</script>
</head>
<body>
<form method="get" action="./register.php" class="my-form"></
<p id="error" class="error"></p>
<table style="width:400px;">
<tr>
<td style="width: 35%;">
Name:
</td>
<td style="width: 65%;">
<input id="name" type="text" name="name" maxlength="52" />
</td>
</tr>
<tr>
<td style="width: 35%;">
Password:
</td>
<td style="width: 65%;">
<input id="password" type="password" name="password" maxlength="16" />
</td>
</tr>
<tr>
<td style="width: 35%;">
Email:
</td>
<td style="width: 65%;">
<input id="email" type="text" name="email" maxlength="2048" />
</td>
</tr>
<tr>
<td style="width: 35%;">
Telephone:
</td>
<td style="width: 65%;">
<input id="telephone" type="text" name="email" maxlength="16" />
</td>
</tr>
<tr>
<td colspan="2" style="width: 100%;">
<input type="submit" value="Submit" onclick="return ValidateForm()" />
</td>
</tr>
</table>
</form>
</body>
</html>
Let us now write some JavaScript validation:
function ValidateForm()
{
var nameBox = document.getElementById ("name");
if (nameBox.value.length == 0) {
document.getElementById("error").innerHTML = "Error: Enter your full name.";
document.getElementById("error").style.display = 'block';
return false;
}
var pwBox = document.getElementById ("password");
if (pwBox.value.length < 6){
document.getElementById("error").innerHTML = "Error: Password is too short.";
document.getElementById("error").style.display = 'block';
return false;
}
// 6-16 non-white character
re = /^\S{6,16}$/;
if (!pwBox.value.match (re)){
document.getElementById("error").innerHTML = "Error: Invalid password.";
document.getElementById("error").style.display = 'block';
return false;
}
// Telephone may be empty or only 7-16 digits
re = /^\d{7,16}$/;
var telBox = document.getElementById ("telephone");
if (telBox.value.length > 0){
if (!telBox.value.match (re)){
document.getElementById("error").innerHTML = "Error: Invalid telephone number.";
document.getElementById("error").style.display = 'block';
return false;
}
}
// regular expression pattern of email
re = /^\w+([\.\-\+]\w+)*@\w+(\-\w+)*\.\w+(\-\w+)*(\.\w+(\-\w+)*)*$/;
var emailBox = document.getElementById ("email");
if (!emailBox.value.match (re))
{
document.getElementById("error").innerHTML = "Error: Invalid email address: " + emailBox.value;
document.getElementById("error").style.display = 'block';
return false;
}
document.getElementById("error").style.display = 'none';
return true;
}