StackTips
 5 minutes

Validate Form Using JavaScript Regular Expressions Without jQuery

By Editorial @stacktips, On Sep 17, 2023 JavaScript 2.38K Views

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">
     // 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;
}
stacktips avtar

Editorial

StackTips provides programming tutorials, how-to guides and code snippets on different programming languages.