Foundation's Abide provides a robust form validation system with built-in patterns, custom validators, and accessibility support. It offers real-time validation, custom error messages, and extensive configuration options.
The core validation component that handles form validation with built-in patterns and custom validators.
/**
* Form validation component with pattern matching and custom validators
*/
class Abide {
constructor(element: JQuery, options?: IAbideOptions);
/** Enable form validation */
enableValidation(): void;
/** Disable form validation */
disableValidation(): void;
/** Check if field is required and has value */
requiredCheck(element: JQuery): boolean;
/** Find error element for field */
findFormError(element: JQuery, failedValidators?: string[]): JQuery;
/** Find label for field */
findLabel(element: JQuery): boolean;
/** Find labels for radio button group */
findRadioLabels(elements: JQuery): boolean;
/** Find labels for checkbox group */
findCheckboxLabels(elements: JQuery): boolean;
/** Add error styling to field */
addErrorClasses(element: JQuery, failedValidators?: string[]): void;
/** Add accessibility attributes */
addA11yAttributes(element: JQuery): void;
/** Add global error accessibility attributes */
addGlobalErrorA11yAttributes(element: JQuery): void;
/** Remove error styling from radio group */
removeRadioErrorClasses(groupName: string): void;
/** Remove error styling from checkbox group */
removeCheckboxErrorClasses(groupName: string): void;
/** Remove error styling from field */
removeErrorClasses(element: JQuery): void;
/** Validate single input field */
validateInput(element: JQuery): boolean;
/** Validate entire form */
validateForm(): boolean;
/** Validate text input against pattern */
validateText(element: JQuery, pattern: string): boolean;
/** Validate radio button group */
validateRadio(groupName: string): boolean;
/** Validate checkbox group */
validateCheckbox(groupName: string): boolean;
/** Check if field matches validation requirements */
matchValidation(element: JQuery, validators: string, required: boolean): boolean;
/** Reset form validation state */
resetForm(): void;
/** Validation enabled state */
initialized: boolean;
}
interface IAbideOptions {
/** When to trigger validation ('fieldChange', 'formSubmit', null) */
validateOn?: string | null;
/** CSS class for error labels */
labelErrorClass?: string;
/** CSS class for error inputs */
inputErrorClass?: string;
/** Selector for form error containers */
formErrorSelector?: string;
/** CSS class for form errors */
formErrorClass?: string;
/** Add accessibility attributes */
a11yAttributes?: boolean;
/** ARIA error message level */
a11yErrorLevel?: string;
/** Enable live validation */
liveValidate?: boolean;
/** Validate on blur event */
validateOnBlur?: boolean;
/** Validation patterns */
patterns?: IAbidePatterns;
/** Custom validators */
validators?: any;
}Foundation includes common validation patterns for various input types.
/**
* Built-in validation patterns for common input types
*/
interface IAbidePatterns {
/** Alphabetic characters only */
alpha?: RegExp;
/** Alphanumeric characters only */
alpha_numeric?: RegExp;
/** Integer numbers only */
integer?: RegExp;
/** Numeric values (including decimals) */
number?: RegExp;
/** Credit card number format */
card?: RegExp;
/** Credit card CVV format */
cvv?: RegExp;
/** Email address format */
email?: RegExp;
/** URL format */
url?: RegExp;
/** Domain name format */
domain?: RegExp;
/** Date and time format */
datetime?: RegExp;
/** Date format */
date?: RegExp;
/** Time format */
time?: RegExp;
/** ISO date format */
dateISO?: RegExp;
/** Month/day/year format */
month_day_year?: RegExp;
/** Day/month/year format */
day_month_year?: RegExp;
/** Color hex format */
color?: RegExp;
/** Website URL format */
website?: any;
}Usage Examples:
<!-- Basic form validation -->
<form data-abide novalidate>
<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="cell small-12">
<label>Email Required
<input type="email" placeholder="test@example.com" required>
<span class="form-error">
Yo, you had better fill this out, it's required.
</span>
</label>
</div>
<div class="cell small-12">
<label>Password Required
<input type="password" id="password" placeholder="Password" required>
<span class="form-error">
I'm required!
</span>
</label>
</div>
<div class="cell small-12">
<label>Re-enter Password
<input type="password" placeholder="Re-enter Password"
required pattern="alpha_numeric"
data-equalto="password">
<span class="form-error">
Passwords must match!
</span>
</label>
</div>
<div class="cell small-12">
<fieldset class="cell small-12">
<legend>Choose Your Favorite</legend>
<input type="radio" name="pokemon" value="Red" id="pokemonRed" required>
<label for="pokemonRed">Red</label>
<input type="radio" name="pokemon" value="Blue" id="pokemonBlue" required>
<label for="pokemonBlue">Blue</label>
<span class="form-error">
You must choose at least one.
</span>
</fieldset>
</div>
<div class="cell small-12">
<button class="button" type="submit" value="Submit">Submit</button>
</div>
</div>
</div>
</form>You can extend Abide with custom validation functions.
// Add custom validator
Foundation.Abide.defaults.validators['myCustomValidator'] = function($el, required, parent) {
// Custom validation logic
return true; // or false
};
// Use in HTML
// <input type="text" data-validator="myCustomValidator" required>Abide triggers events during the validation process.
// Listen for validation events
$('#my-form')
.on('forminvalid.zf.abide', function(ev, frm) {
console.log('Form id ' + frm.attr('id') + ' is invalid');
})
.on('formvalid.zf.abide', function(ev, frm) {
console.log('Form id ' + frm.attr('id') + ' is valid');
})
.on('submit', function(ev) {
ev.preventDefault();
console.log('Submit intercepted');
});CSS classes applied during validation for styling purposes.
/**
* Form validation state classes
*/
.is-invalid-input {
border-color: #cc4b37;
background-color: #f9eaea;
}
.is-invalid-label {
color: #cc4b37;
}
.form-error {
display: none;
margin-top: -0.5rem;
margin-bottom: 1rem;
font-size: 0.75rem;
font-weight: bold;
color: #cc4b37;
}
.form-error.is-visible {
display: block;
}
/**
* Input group validation
*/
.input-group.is-invalid-input > .input-group-label {
border-color: #cc4b37;
background-color: #f9eaea;
color: #cc4b37;
}Abide includes comprehensive accessibility support with ARIA attributes.
/**
* Accessibility configuration
*/
interface AbideA11yOptions {
/** Enable accessibility attributes */
a11yAttributes: boolean;
/** ARIA error message level ('alert', 'status', 'polite') */
a11yErrorLevel: string;
}Generated ARIA attributes:
<!-- Abide automatically adds these attributes -->
<input type="email"
required
aria-required="true"
aria-describedby="error-email"
aria-invalid="false">
<span class="form-error"
id="error-email"
role="alert"
aria-live="assertive"
aria-atomic="true">
Error message
</span>// Initialize with custom options
$('#my-form').foundation('Abide', {
validateOn: 'fieldChange',
liveValidate: true,
validateOnBlur: true,
a11yAttributes: true,
a11yErrorLevel: 'alert',
patterns: {
// Override or add patterns
phone: /^[\d\+\-\.\(\)\s]+$/,
custom_pattern: /^[a-zA-Z0-9]{3,}$/
},
validators: {
// Custom validators
myValidator: function($el, required, parent) {
if (!required) return true;
const value = $el.val();
// Custom validation logic
return value.length >= 3;
}
}
});
// Programmatic validation
const abide = new Foundation.Abide($('#my-form'));
// Validate specific field
const isValid = abide.validateInput($('#email-field'));
// Validate entire form
const formIsValid = abide.validateForm();
// Reset form validation
abide.resetForm();Abide works seamlessly with other Foundation components like Reveal modals and Accordion panels.
// Validate form in modal before closing
$('#my-modal').on('close.zf.reveal', function(e) {
const form = $(this).find('form');
const abide = form.data('zfPlugin');
if (abide && !abide.validateForm()) {
e.preventDefault();
return false;
}
});
// Validate accordion panel content
$('#my-accordion').on('down.zf.accordion', function(e, $target) {
const form = $target.find('form');
if (form.length) {
form.foundation('Abide');
}
});