JavaScript Form Validation
Validating the form submitted by the user is important to prevent
inappropriate values and ensure authentication.
JavaScript enables client-side form validation, making data processing faster
compared to server-side validation. As a result, most web developers prefer
using JavaScript for form validation.
JavaScript allows us to validate various fields, including name, password,
email, date, mobile numbers, and more.
Example:
In this example, we will validate the name and password. The name field must
not be empty, and the password must be at least 6 characters long.
In this example, the form is validated upon submission. The user will not
proceed to the next page until the entered values are correct.
<!DOCTYPE
html>
<html lang="en">
<head>
<meta
charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Form
Validation Example</title>
<script
type="text/javascript">
function validateForm() {
var
name =
document.forms["myForm"]["name"].value;
var
password =
document.forms["myForm"]["password"].value;
// Validate name
if (name == "") {
alert("Name must be
filled out");
return false;
}
// Validate password
if (password.length < 6) {
alert("Password must be at least 6 characters long");
return false;
}
return true;
// Allow form submission
if validation passes
}
</script>
</head>
<body>
<h2>Form Validation
Example</h2>
<form name="myForm"
action="/submit" method="post" onsubmit="return validateForm()">
<label
for="name">Name:</label>
<input type="text" id="name"
name="name"><br><br>
<label
for="password">Password:</label>
<input type="password" id="password"
name="password"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Output:
