Validating form fields is essential in every web application to ensure clean and complete data submission. Using JavaScript form validation, you can quickly check whether users have filled out required fields like name, email, or message before the form is submitted.
This tutorial covers a simple JavaScript form validation method that’s easy to implement, reliable, and user-friendly—perfect for developers of all levels.
If you are WordPress user you can check best WordPress contact forms plugins. In case you need a HTML, PHP or WordPress developer contact us.
📋 Basic HTML Form Structure
To start with, you need a basic HTML form. Here’s how the structure looks:
<form action="#" method="post" onsubmit="return validateForm();">
<table width="100%" cellpadding="10px" cellspacing="0">
<tr>
<td>Name (Required):</td>
<td><input type="text" name="name" id="name" /></td>
</tr>
<tr>
<td>Email (Required):</td>
<td><input type="text" name="email" id="email" /></td>
</tr>
<tr>
<td>Message (Required):</td>
<td><textarea name="message" id="message"></textarea></td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="Submit" /></td>
</tr>
</table>
</form>The key point here is the onsubmit="return validateForm();" part in the <form> tag. This triggers the JavaScript validation function before submission.
🧠 JavaScript Code for Form Validation
Here’s the validation function you can place either in your <head> or right before the closing </body> tag:
<script type="text/javascript">
function validateForm() {
// Validate Name
var name = document.getElementById('name').value;
if (name.trim() === '') {
alert('Name cannot be empty.');
document.getElementById('name').focus();
return false;
}
// Validate Email
var email = document.getElementById('email').value;
if (email.trim() === '') {
alert('Email cannot be empty.');
document.getElementById('email').focus();
return false;
}
// Validate Message
var message = document.getElementById('message').value;
if (message.trim() === '') {
alert('Message cannot be empty.');
document.getElementById('message').focus();
return false;
}
// All validations passed
return true;
}
</script>🔍 How It Works
- Trigger on Submit: When the user clicks the submit button,
validateForm()runs. - Check Field Values: The script checks if the name, email, or message fields are empty.
- Focus & Alert: If a field is empty, it shows an alert and focuses on the empty field.
- Prevent Submission: If any field is empty,
return falsestops the form from submitting.
This method ensures the form only submits when all required fields have valid values.
🧩 Tips for Better Form Validation
- Always trim input values to avoid issues with spaces.
- Add HTML5 attributes like
requiredfor additional browser-side validation. - You can further enhance this with regex patterns for email validation or phone numbers.
✅ Final Thoughts
JavaScript form validation is a must-have for improving user experience and ensuring data integrity. With just a few lines of code, you can prevent empty submissions and guide your users to fill in all required information correctly.
