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.

Validate Form Using Javascript Regular Expressions Without jQuery

<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">
    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;
    }

    </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>
Tagged in : Html JavaScript jQuery

Nilanchala

A blogger, a bit of tech freak and a software developer. He is a thought leader in the fusion of design and mobile technologies. He is the author of Xamarin Mobile Application Development for Android Book (goo.gl/qUZ0XV3), DZone MVB and founder of stacktips.com.

Join The Discussion

Please note: We reserve the right to delete comments that contains snarky remarks, offensive or off-topic. To know more read our comments policy.