JavaScript form validation example


In this article, we are going to show how to validate the form on the client side using JavaScript. For example, you want to store some information about the user and you don’t want the user to enter any null or blank values. To prevent this you need to validate the information on the user system before sending the request on the server.

Note: Client side validation reduces the load on Server machine and increases the performance of application.

JS Snippet
 function formValidationFn() {
                // geting the values of form input
                var userName = document.getElementById("uname").value;
                var userEmail = document.getElementById("uemail").value;
                var userPass = document.getElementById("upass").value;

                // checking the condition
                if (userName === null || userName === "") {
                    alert("Name can't be blank.");
                    return false;
                } else if (userEmail === null || userEmail === "") {
                    alert("Email can't be blank.");
                    return false;
                } else if (userPass === null || userPass === "") {
                    alert("Password can't be blank.");
                    return false;
                } else {
                    return true;
                }
        }
js-validation.jsp
<!DOCTYPE html>
<html>
    <head>
        <title>JavaScript Form Validation Example</title>
        <script type="text/javascript">

            function formValidationFn() {
                // geting the values of form input
                var userName = document.getElementById("uname").value;
                var userEmail = document.getElementById("uemail").value;
                var userPass = document.getElementById("upass").value;

                // checking the condition
                if (userName === null || userName === "") {
                    alert("Name can't be blank.");
                    return false;
                } else if (userEmail === null || userEmail === "") {
                    alert("Email can't be blank.");
                    return false;
                } else if (userPass === null || userPass === "") {
                    alert("Password can't be blank.");
                    return false;
                } else {
                    return true;
                }
            }
        </script>
    </head>
    <body>
        <form action="welcome.jsp" method="GET" onsubmit="return formValidationFn();">
            <pre>		
		Name: <input type="text" id="uname" />	
	
		Email: <input type="text" id="uemail" />
		
		Password: <input type="password" id="upass" />
		
		<input type="submit" value="Login" />
            </pre>
        </form>
    </body>
</html>

Similar Posts

About the Author

Websparrow
I like sharing my experiments and ideas with everyone by writing articles on the latest technological trends.