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
Selected Reading
How to change the color of error message in jquery validation in JavaScript?
jQuery validation allows developers to create user-friendly forms with real-time feedback. One common requirement is customizing the appearance of error messages, particularly their color. This tutorial demonstrates how to modify error message colors in jQuery validation using CSS and JavaScript.
Basic Setup
To customize error message colors, you need a form with input fields and corresponding error message containers. The key is using CSS or jQuery's .css() method to apply styling dynamically.
Method 1: Using Inline CSS Styles
The simplest approach is setting the color directly in HTML or through jQuery:
<!DOCTYPE html>
<html>
<head>
<title>jQuery Validation Color Change</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<div class="container mt-4">
<h2 class="text-center text-primary">Form Validation with Custom Error Colors</h2>
<form id="validationForm">
<div class="form-group">
<label for="username">Username:</label>
<input type="text" id="username" class="form-control">
<div id="usernameError" class="error-message"></div>
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" id="email" class="form-control">
<div id="emailError" class="error-message"></div>
</div>
<div class="form-group">
<label for="password">Password:</label>
<input type="password" id="password" class="form-control">
<div id="passwordError" class="error-message"></div>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
<script>
$(document).ready(function() {
// Hide all error messages initially
$('.error-message').hide();
// Username validation
$('#username').on('keyup blur', function() {
const username = $(this).val();
const errorElement = $('#usernameError');
if (username.length === 0) {
errorElement.text('Username is required').css('color', 'red').show();
} else if (username.length < 3) {
errorElement.text('Username must be at least 3 characters').css('color', 'orange').show();
} else {
errorElement.hide();
}
});
// Email validation
$('#email').on('keyup blur', function() {
const email = $(this).val();
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
const errorElement = $('#emailError');
if (email.length === 0) {
errorElement.text('Email is required').css('color', 'red').show();
} else if (!emailRegex.test(email)) {
errorElement.text('Please enter a valid email').css('color', 'purple').show();
} else {
errorElement.hide();
}
});
// Password validation
$('#password').on('keyup blur', function() {
const password = $(this).val();
const errorElement = $('#passwordError');
if (password.length === 0) {
errorElement.text('Password is required').css('color', 'red').show();
} else if (password.length < 6) {
errorElement.text('Password must be at least 6 characters').css('color', 'blue').show();
} else {
errorElement.text('Strong password!').css('color', 'green').show();
}
});
});
</script>
</body>
</html>
Method 2: Using CSS Classes
A more maintainable approach uses predefined CSS classes for different error types:
<!DOCTYPE html>
<html>
<head>
<title>CSS Classes for Error Colors</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
.error-required { color: #dc3545; font-weight: bold; }
.error-warning { color: #fd7e14; }
.error-info { color: #0dcaf0; }
.success-message { color: #198754; }
.container { max-width: 500px; margin: 20px auto; padding: 20px; }
.form-group { margin-bottom: 15px; }
input { width: 100%; padding: 8px; margin: 5px 0; }
button { background: #007bff; color: white; padding: 10px 20px; border: none; }
</style>
</head>
<body>
<div class="container">
<h3>Form with CSS Class-Based Error Colors</h3>
<form>
<div class="form-group">
<label>Phone Number:</label>
<input type="text" id="phone" placeholder="Enter 10-digit number">
<div id="phoneError"></div>
</div>
<button type="button" onclick="validatePhone()">Validate</button>
</form>
</div>
<script>
function validatePhone() {
const phone = document.getElementById('phone').value;
const errorElement = $('#phoneError');
// Remove all previous classes
errorElement.removeClass('error-required error-warning error-info success-message');
if (phone.length === 0) {
errorElement.addClass('error-required')
.text('Phone number is required');
} else if (isNaN(phone)) {
errorElement.addClass('error-warning')
.text('Only numbers are allowed');
} else if (phone.length !== 10) {
errorElement.addClass('error-info')
.text('Phone number must be exactly 10 digits');
} else {
errorElement.addClass('success-message')
.text('Valid phone number!');
}
}
</script>
</body>
</html>
Method 3: Dynamic Color Based on Error Type
You can create more sophisticated validation with color-coded feedback:
<!DOCTYPE html>
<html>
<head>
<title>Dynamic Error Colors</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
body { font-family: Arial, sans-serif; margin: 20px; }
.form-container { max-width: 400px; margin: auto; }
input { width: 100%; padding: 10px; margin: 5px 0 10px 0; border: 2px solid #ddd; }
.error { font-size: 14px; margin-bottom: 10px; font-weight: bold; }
</style>
</head>
<body>
<div class="form-container">
<h3>Password Strength Validator</h3>
<input type="password" id="passwordInput" placeholder="Enter password">
<div id="passwordFeedback" class="error"></div>
</div>
<script>
$('#passwordInput').on('keyup', function() {
const password = $(this).val();
const feedback = $('#passwordFeedback');
if (password.length === 0) {
feedback.text('').hide();
return;
}
let strength = 0;
let message = '';
let color = '';
// Check password criteria
if (password.length >= 8) strength++;
if (/[A-Z]/.test(password)) strength++;
if (/[a-z]/.test(password)) strength++;
if (/[0-9]/.test(password)) strength++;
if (/[^A-Za-z0-9]/.test(password)) strength++;
// Assign color and message based on strength
switch(strength) {
case 0:
case 1:
color = '#dc3545'; // Red
message = 'Very Weak Password';
break;
case 2:
color = '#fd7e14'; // Orange
message = 'Weak Password';
break;
case 3:
color = '#ffc107'; // Yellow
message = 'Fair Password';
break;
case 4:
color = '#20c997'; // Teal
message = 'Good Password';
break;
case 5:
color = '#198754'; // Green
message = 'Strong Password';
break;
}
feedback.css('color', color).text(message).show();
});
</script>
</body>
</html>
Key Techniques for Error Message Colors
| Method | Best For | Flexibility |
|---|---|---|
Inline CSS (.css()) |
Simple forms | High - dynamic colors |
| CSS Classes | Consistent styling | Medium - predefined colors |
| Dynamic Logic | Complex validation | Very High - conditional colors |
Common Error Color Conventions
- Red (#dc3545) - Critical errors, required fields
- Orange (#fd7e14) - Warnings, format issues
- Blue (#0dcaf0) - Information, helpful hints
- Green (#198754) - Success, valid input
- Purple (#6f42c1) - Special validation cases
Conclusion
Customizing jQuery validation error message colors improves user experience by providing visual feedback about different types of validation issues. Use CSS classes for consistency or jQuery's .css() method for dynamic color changes based on specific validation logic.
Updated on: 2026-03-15T23:19:00+05:30
6K+ Views
Advertisements