Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to do basic form validation using JavaScript?
JavaScript provides a way to validate form data on the client's computer before sending it to the web server. This improves user experience by catching errors immediately and reduces server load.
Basic form validation includes checking that all mandatory fields are filled in and that data meets specific format requirements. It requires looping through each field in the form and validating the data.
Basic Validation Methods
Form validation typically checks for:
- Empty required fields
- Data format (email, phone, zip code)
- Data length constraints
- Numeric values where required
Example: Complete Form Validation
Here's a comprehensive example that validates a user registration form:
<html>
<head>
<title>Form Validation</title>
<script>
// Form validation function
function validate() {
// Name validation
if (document.myForm.Name.value == "") {
alert("Please provide your name!");
document.myForm.Name.focus();
return false;
}
// Email validation
if (document.myForm.EMail.value == "") {
alert("Please provide your Email!");
document.myForm.EMail.focus();
return false;
}
// Basic email format check
var emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!emailPattern.test(document.myForm.EMail.value)) {
alert("Please provide a valid email address!");
document.myForm.EMail.focus();
return false;
}
// Zip code validation
if (document.myForm.Zip.value == "" ||
isNaN(document.myForm.Zip.value) ||
document.myForm.Zip.value.length != 5) {
alert("Please provide a zip in the format #####.");
document.myForm.Zip.focus();
return false;
}
// Country selection validation
if (document.myForm.Country.value == "-1") {
alert("Please provide your country!");
return false;
}
return true;
}
</script>
</head>
<body>
<form action="/cgi-bin/test.cgi" name="myForm" onsubmit="return(validate());">
<table cellspacing="2" cellpadding="2" border="1">
<tr>
<td align="right">Name</td>
<td><input type="text" name="Name" /></td>
</tr>
<tr>
<td align="right">EMail</td>
<td><input type="text" name="EMail" /></td>
</tr>
<tr>
<td align="right">Zip Code</td>
<td><input type="text" name="Zip" /></td>
</tr>
<tr>
<td align="right">Country</td>
<td>
<select name="Country">
<option value="-1" selected>[choose yours]</option>
<option value="1">USA</option>
<option value="2">UK</option>
<option value="3">INDIA</option>
</select>
</td>
</tr>
<tr>
<td align="right"></td>
<td><input type="submit" value="Submit" /></td>
</tr>
</table>
</form>
</body>
</html>
How It Works
The validation function is called when the form is submitted through the onsubmit event. Here's the validation flow:
- Name Check: Ensures the name field is not empty
- Email Check: Validates both presence and basic email format using regex
- Zip Code Check: Ensures it's numeric and exactly 5 digits
- Country Check: Verifies a country is selected from dropdown
If any validation fails, the function displays an alert, focuses on the problematic field, and returns false to prevent form submission.
Modern Alternative Using HTML5
HTML5 provides built-in validation attributes that work without JavaScript:
<form action="/submit" method="post">
<input type="text" name="name" required placeholder="Name">
<input type="email" name="email" required placeholder="Email">
<input type="tel" name="zip" pattern="[0-9]{5}" required placeholder="12345">
<select name="country" required>
<option value="">Select Country</option>
<option value="usa">USA</option>
<option value="uk">UK</option>
<option value="india">India</option>
</select>
<button type="submit">Submit</button>
</form>
Key Points
- Always validate on both client and server side
- Use
focus()to guide users to problematic fields - Return
falsefrom validation functions to prevent submission - Consider HTML5 validation for simpler forms
- Provide clear, helpful error messages
Conclusion
JavaScript form validation improves user experience by providing immediate feedback. Combine client-side validation with server-side checks for complete security and data integrity.
823 Views
