Form validation in JavaScript is a process where you ensure that user input meets certain criteria before allowing it to be submitted to the server. This helps improve the quality of data submitted and provides a better user experience. Below is a basic example of form validation using JavaScript:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form Validation</title>
<style>
.error {
color: red;
}
</style>
</head>
<body>
<h2>Form Validation Example</h2>
<form id="myForm" onsubmit="return validateForm()">
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<span id="nameError" class="error"></span>
<br>
<label for="email">Email:</label>
<input type="text" id="email" name="email">
<span id="emailError" class="error"></span>
<br>
<input type="submit" value="Submit">
</form>
</body>
</html>Script:
<script>
function validateForm() {
var name = document.getElementById('name').value;
var email = document.getElementById('email').value;
// Reset error messages
document.getElementById('nameError').innerHTML = '';
document.getElementById('emailError').innerHTML = '';
// Validate Name
if (name === '') {
document.getElementById('nameError').innerHTML = 'Name is required';
return false;
}
// Validate Email
if (email === '') {
document.getElementById('emailError').innerHTML = 'Email is required';
return false;
} else {
// Regular expression for basic email validation
var emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!emailRegex.test(email)) {
document.getElementById('emailError').innerHTML = 'Invalid email format';
return false;
}
}
// If all validations pass, the form can be submitted
return true;
}
</script>- Upon form submission, the validateForm method is invoked.
- The email and name fields' contents are retrieved.
- Afterwards, it determines whether these fields satisfy specific requirements (e.g., not empty, proper email format).
- An error notice appears and the form submission is blocked if any validation fails.
Once every validation is successful, the form is sent in.
This is a rudimentary example that you can further modify to suit your needs. For more complicated circumstances, you may also want to think about utilizing more sophisticated validation frameworks or tools.