How to validate form using JavaScript?
JavaScript Validation
946
20-Jul-2021
Updated on 21-Apr-2024
Bhavesh Badani
21-Apr-2024I'm going to explain a simple example of form validation using HTML and JavaScript. You can easily understand the code as i tried a lot to keep it simple and clean.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Registration Form</title>
<style>
/* Add some basic styling for clarity */
body {
font-family: Arial, sans-serif;
}
.error {
color: red;
}
</style>
</head>
<body>
<h1>Registration Form</h1>
<form name="RegForm" onsubmit="return validateForm()">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
<span class="error" id="usernameError"></span><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<span class="error" id="emailError"></span><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
<span class="error" id="passwordError"></span><br>
<button type="submit">Register</button>
</form>
<script>
function validateForm() {
// Get form input values
const username = document.getElementById('username').value;
const email = document.getElementById('email').value;
const password = document.getElementById('password').value;
// Validate username (non-empty)
if (username.trim() === '') {
document.getElementById('usernameError').textContent = 'Username is required.';
return false;
}
// Validate email format
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!emailRegex.test(email)) {
document.getElementById('emailError').textContent = 'Invalid email format.';
return false;
}
// Validate password length (at least 6 characters)
if (password.length < 6) {
document.getElementById('passwordError').textContent = 'Password must be at least 6 characters.';
return false;
}
// All validations passed
return true;
}
</script>
</body>
</html>
priya sharma
07-Dec-2023To validate a form using JavaScript, follow these steps:
HTML Structure:
Ensure your form elements have appropriate attributes, like id and name. This helps in easy identification.
<form id="myForm" name="myForm" onsubmit="return validateForm()"><!-- Your form fields go here --><input type="text" id="username" name="username" placeholder="Username"><input type="password" id="password" name="password" placeholder="Password"><!-- Add more fields as needed --><button type="submit">Submit</button></form>JavaScript Function:
Write a JavaScript function to handle form validation. This function should be called when the form is submitted.
function validateForm() {// Fetch form elementsvar username = document.forms["myForm"]["username"].value;var password = document.forms["myForm"]["password"].value;// Simple validation exampleif (username === "" || password === "") {alert("Please fill out all fields");return false; // Prevent form submission}// Add more complex validation as neededreturn true; // Allow form submission}Trigger Validation:
Ensure the validation function is triggered when the form is submitted. This can be done using the onsubmit attribute in the form tag.
<form id="myForm" name="myForm" onsubmit="return validateForm()"><!-- Form fields go here --><button type="submit">Submit</button></form>Enhancements:
Expand the validateForm function based on your specific form requirements. You can check for valid email formats, minimum password length, or any other criteria.
function validateForm() {var username = document.forms["myForm"]["username"].value;var password = document.forms["myForm"]["password"].value;if (username === "" || password === "") {alert("Please fill out all fields");return false;}// Additional validationsif (password.length < 8) {alert("Password must be at least 8 characters long");return false;}// Add more validations as neededreturn true;}By following these steps, you can create a basic form validation mechanism using JavaScript. Customize it further based on your specific form and validation requirements.
For more information, You can also check this : https://stackoverflow.com/questions/57520699/how-to-validate-form-using-javascript
fsl training
https://www.javatpoint.com/javascript-form-validation
I hope this will help you.
Aryan Kumar
28-Nov-2023Form validation using JavaScript is a common practice to ensure that user input meets certain criteria before it is submitted to the server. Here's a basic example of how you can validate a form using JavaScript:
In this example:
You can extend this example based on your specific validation requirements. This is a simple example, and in a real-world scenario, you might want to perform more thorough validation and potentially use a JavaScript library like Validator.js for more advanced validation rules.