/** * @module FormValidator * Form validation with support for native HTML5 validation and error summaries. * Provides automatic validation on submit with customizable behavior. * * @example * // Basic usage with submit callback * const form = document.querySelector('form'); * const validator = new FormValidator(form, { * submitCallback: () => saveData() * }); * * @example * // With auto-validation on input * const validator = new FormValidator(form, { * autoValidate: true, * useSummary: true * }); */ /** * Configuration options for FormValidator. */ export interface ValidatorOptions { /** Validate on every input event, not just submit */ autoValidate?: boolean; /** Show errors in a summary element instead of browser tooltips */ useSummary?: boolean; /** Custom validation function called before native validation */ customChecks?: (form: HTMLFormElement) => void; /** Always prevent default form submission */ preventDefault?: boolean; /** Prevent default on validation failure (default: true) */ preventDefaultOnFailed?: boolean; /** Callback invoked when form passes validation */ submitCallback?: () => void; } /** * Form validation helper that integrates with HTML5 validation. * Supports error summaries, auto-validation, and custom submit handling. * * @example * // Prevent submission and handle manually * class MyComponent extends HTMLElement { * private validator: FormValidator; * * connectedCallback() { * const form = this.querySelector('form'); * this.validator = new FormValidator(form, { * submitCallback: () => this.handleSubmit() * }); * } * * private async handleSubmit() { * const data = readData(this.form); * await fetch('/api/save', { method: 'POST', body: JSON.stringify(data) }); * } * } * * @example * // With error summary display * const validator = new FormValidator(form, { * useSummary: true, * autoValidate: true * }); */ export declare class FormValidator { private form; private options?; private errorSummary; constructor(form: HTMLFormElement, options?: ValidatorOptions); /** * Validates all form fields. * Uses native HTML5 validation and optionally displays an error summary. * * @returns true if form is valid, false otherwise */ validateForm(): boolean; /** * Displays a list of error messages in the summary element. * * @param messages - Array of error messages to display */ displayErrorSummary(messages: string[]): void; private createErrorSummary; /** * Adds a single error to the summary display. * * @param fieldName - The name of the field with the error * @param message - The error message */ addErrorToSummary(fieldName: string, message: string): void; /** * Clears all errors from the summary display. */ clearErrorSummary(): void; private focusFirstErrorElement; /** * Finds a form element relative to the given element. * Searches parent first, then direct children. * * @param element - The element to search from * @returns The found form element * @throws Error if no form is found * * @example * class MyComponent extends HTMLElement { * connectedCallback() { * const form = FormValidator.FindForm(this); * new FormValidator(form); * } * } */ static FindForm(element: HTMLElement): HTMLFormElement; }