Building Your Learning Module...
Getting things ready for you!
Find videos you like?
Save to resource drawer for future reference!
Give instant visual feedback to users
Show green borders for correct inputs
Show red borders for errors
Indicate required fields clearly
Works with HTML5 validation automatically
Makes forms easier to fill out correctly
Input is correct and meets all requirements
input:valid { border-color: green; }Input has errors or doesn't meet requirements
input:invalid { border-color: red; }Field must be filled out before submitting
input:required { border-left: 3px solid orange; }Field can be left empty
input:optional { opacity: 0.8; }/* Style correct inputs with green */
input:valid {
border-color: #10b981;
background-color: #f0fdf4;
}
/* Add a checkmark icon */
input:valid {
background-image: url("checkmark.svg");
background-repeat: no-repeat;
background-position: right 12px center;
}/* Style incorrect inputs with red */
input:invalid {
border-color: #ef4444;
background-color: #fef2f2;
}
/* Add an X icon */
input:invalid {
background-image: url("error.svg");
background-repeat: no-repeat;
background-position: right 12px center;
}/* Show required fields with orange indicator */
input:required {
border-left: 3px solid #f59e0b;
}
/* Optional fields - subtle styling */
input:optional {
border-left: 3px solid #e5e7eb;
}:not(:placeholder-shown) to only show validation after the user starts typing:input:valid:not(:placeholder-shown). This prevents showing errors on empty fields!<form>
<div class="form-group">
<label for="email">Email Address *</label>
<input
type="email"
id="email"
placeholder="you@example.com"
required
>
<span class="valid-feedback">✓ Valid email</span>
<span class="invalid-feedback">✗ Please enter a valid email</span>
</div>
<div class="form-group">
<label for="website">Website URL</label>
<input
type="url"
id="website"
placeholder="https://example.com"
>
<span class="valid-feedback">✓ Valid URL</span>
<span class="invalid-feedback">✗ Please enter a valid URL</span>
</div>
</form>Loading preview...
<form>
<div class="form-field">
<label for="name">Full Name *</label>
<input type="text" id="name" required>
</div>
<div class="form-field">
<label for="phone">Phone (optional)</label>
<input type="tel" id="phone">
</div>
<div class="form-field">
<label for="message">Message *</label>
<textarea id="message" required rows="4"></textarea>
</div>
</form>Loading preview...
<div class="range-group">
<label for="age">Age (18-65)</label>
<input type="number" id="age" min="18" max="65" placeholder="Enter age">
<div class="range-info">
<span class="range-valid">✓ Age is valid</span>
<span class="range-invalid">✗ Age must be between 18 and 65</span>
</div>
</div>
<div class="range-group">
<label for="quantity">Quantity (1-10)</label>
<input type="number" id="quantity" min="1" max="10" value="5">
<div class="range-info">
<span class="range-valid">✓ Quantity is valid</span>
<span class="range-invalid">✗ Quantity must be between 1 and 10</span>
</div>
</div>
<div class="range-group">
<label for="price">Price ($10-$1000)</label>
<input type="number" id="price" min="10" max="1000" step="10" placeholder="Enter price">
<div class="range-info">
<span class="range-valid">✓ Price is valid</span>
<span class="range-invalid">✗ Price must be between $10 and $1000</span>
</div>
</div>Loading preview...
Help users create accounts with correct information
Ensure messages can be sent successfully
Validate payment and shipping details properly
Make sure users enter valid configuration data
:not(:placeholder-shown) to avoid showing errors immediatelytype="email", type="url" for automatic validation✅ All Modern Browsers: Validation pseudo-classes (:valid, :invalid, :required, :in-range) work in Chrome, Firefox, Safari, and Edge. They're part of CSS3 and have been supported for years!