Explain HTML5 Form Validation Attributes

Answer

HTML5 provides built-in form validation attributes that work without JavaScript, offering native browser validation with customizable error messages.

Validation Flow

Common Validation Attributes

Attribute	Purpose	Example
required	Field must be filled	<input required>
pattern	Regex pattern match	pattern="[A-Za-z]+"
min/max	Number/date range	min="1" max="100"
minlength/maxlength	Text length limits	minlength="8"
type	Input type validation	type="email"
step	Number increments	step="0.01"

Examples

<form>
	<!-- Required field -->
	<input type="text" name="username" required />

	<!-- Email validation -->
	<input type="email" name="email" required />

	<!-- Password with length -->
	<input
		type="password"
		name="password"
		minlength="8"
		maxlength="20"
		required
	/>

	<!-- Pattern matching (phone number) -->
	<input
		type="tel"
		name="phone"
		pattern="[0-9]{10}"
		title="Enter 10 digit phone number"
	/>

	<!-- Number range -->
	<input type="number" name="age" min="18" max="100" />

	<!-- URL validation -->
	<input type="url" name="website" placeholder="https://..." />

	<button type="submit">Submit</button>
</form>

Type-Based Validation

<!-- Built-in format validation -->
<input type="email" />
<!-- Checks for @ and domain -->
<input type="url" />
<!-- Checks for valid URL format -->
<input type="number" />
<!-- Only accepts numbers -->
<input type="date" />
<!-- Date picker with format -->
<input type="tel" />
<!-- On mobile, shows number keyboard -->

Custom Error Messages

<input
	type="text"
	required
	pattern="[A-Z]{3}[0-9]{3}"
	title="Format: ABC123 (3 letters, 3 numbers)"
	oninvalid="this.setCustomValidity('Please enter valid code')"
	oninput="this.setCustomValidity('')"
/>

CSS Pseudo-Classes for Validation

/* Style valid/invalid fields */
input:valid {
	border-color: green;
}

input:invalid {
	border-color: red;
}

/* Only show invalid after interaction */
input:invalid:not(:placeholder-shown) {
	border-color: red;
}

/* Required field indicator */
input:required::after {
	content: "*";
	color: red;
}

JavaScript Validation API

const form = document.querySelector("form");
const email = document.querySelector("#email");

// Check validity
email.checkValidity(); // Returns true/false
email.validity.valid; // Boolean
email.validity.valueMissing; // Is empty but required
email.validity.typeMismatch; // Wrong format
email.validity.patternMismatch; // Doesn't match pattern

// Custom validation
email.setCustomValidity("Custom error message");
email.reportValidity(); // Shows error immediately

Key Points

• Native validation works without JavaScript
• Combine multiple attributes for complex rules
• Use title attribute for pattern hints
• Style with :valid, :invalid, :required pseudo-classes
• JavaScript Validation API for custom logic
• Always add server-side validation too!