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
