Simple jQuery Form Validation Example
HTML
<form id="myForm">
<label>
Name: <input type="text" id="name" name="name" />
</label><br><br>
<label>
Email: <input type="text" id="email" name="email" />
</label><br><br>
<label>
Message: <textarea id="message" name="message"></textarea>
</label><br><br>
<button type="submit">Submit</button>
</form>
<div id="errorMessages" style="color: red; margin-top: 10px;"></div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
jQuery Validation Script
$(document).ready(function() {
$('#myForm').submit(function(event) {
event.preventDefault(); // Prevent form from submitting
let errors = [];
let name = $('#name').val().trim();
let email = $('#email').val().trim();
let message = $('#message').val().trim();
// Validate name
if (name === '') {
errors.push("Name is required.");
}
// Validate email
if (email === '') {
errors.push("Email is required.");
} else if (!validateEmail(email)) {
errors.push("Please enter a valid email.");
}
// Validate message
if (message === '') {
errors.push("Message cannot be empty.");
}
if (errors.length > 0) {
$('#errorMessages').html(errors.join('<br>'));
} else {
$('#errorMessages').html('');
alert('Form submitted successfully!');
// You can proceed to submit the form via AJAX or normal submission here
}
});
function validateEmail(email) {
const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
return regex.test(email);
}
});
How it works:
-
Prevents the form’s default submission.
-
Checks if fields are empty.
-
Validates email with a regex.
-
Shows error messages or a success alert.
