FormValidationInline [check] v1.0.0

Validates that forms perform inline, field-level validation: each validatable input has an aria-describedby error region, validation triggers on blur/input (not just submit), and the form does not use window.alert() for error display.

signature: (html: string, js?: string, context?: object) -> CheckResult predicate: // Forms must validate on blur OR on input — not only on submit. // Validation errors must appear INLINE next to the field, not via window.alert() or // a single error summary at top with no field-level highlight. forms = querySelectorAll('form') for f in forms: inputs = f.querySelectorAll('input:not([type=hidden]):not([type=submit]), textarea, select')

// 1. At least one field has validation attribute (required/pattern/min/max/type=email/aria-invalid binding) hasValidationHook = Array.from(inputs).some(i => i.required || i.pattern || i.min || i.max || ['email','url','tel','number'].includes(i.type) || i.hasAttribute('aria-invalid') || i.hasAttribute('aria-describedby') ) if !hasValidationHook: yield { selector: cssPath(f), fail: 'no-validation-hooks', remedy: 'add required/pattern/type or aria-invalid' }

// 2. Each input has space for an inline error message (aria-describedby pointing to error region) for i in inputs: if !i.required && !i.pattern && !['email','url','tel','number'].includes(i.type): continue descId = i.getAttribute('aria-describedby') if !descId: yield { selector: cssPath(i), fail: 'no-error-region', remedy: 'add aria-describedby="error-id" + ' } continue descEl = document.getElementById(descId.split(/\s+/)[0]) if !descEl: yield { selector: cssPath(i), fail: 'aria-describedby-target-missing', target: descId }

// 3. Detect alert()-based validation (anti-pattern) if js && /\balert\s*(/.test(js) && /onsubmit|addEventListener(['"]submit/.test(js): yield { selector: cssPath(f), fail: 'alert-based-validation', remedy: 'replace alert() with inline error region' }

Validates

@community/rule-form-validation-inline

Severity

high

Failure Message Template

Form '{selector}' fails inline-validation: {fail}. {remedy}. See pattern @community/pattern-form-validation-inline for canonical implementation.

Evaluation Method

automated + manual

Tools

• axe-core
• playwright
• regex
• @anthropic/claude-code

False Positive Rate

medium

FormValidationInline [check] v1.0.0

Validates that forms perform inline, field-level validation: each validatable input has an aria-describedby error region, validation triggers on blur/input (not just submit), and the form does not use window.alert() for error display.

signature: (html: string, js?: string, context?: object) -> CheckResult predicate: // Forms must validate on blur OR on input — not only on submit. // Validation errors must appear INLINE next to the field, not via window.alert() or // a single error summary at top with no field-level highlight. forms = querySelectorAll('form') for f in forms: inputs = f.querySelectorAll('input:not([type=hidden]):not([type=submit]), textarea, select')

// 1. At least one field has validation attribute (required/pattern/min/max/type=email/aria-invalid binding) hasValidationHook = Array.from(inputs).some(i => i.required || i.pattern || i.min || i.max || ['email','url','tel','number'].includes(i.type) || i.hasAttribute('aria-invalid') || i.hasAttribute('aria-describedby') ) if !hasValidationHook: yield { selector: cssPath(f), fail: 'no-validation-hooks', remedy: 'add required/pattern/type or aria-invalid' }

// 2. Each input has space for an inline error message (aria-describedby pointing to error region) for i in inputs: if !i.required && !i.pattern && !['email','url','tel','number'].includes(i.type): continue descId = i.getAttribute('aria-describedby') if !descId: yield { selector: cssPath(i), fail: 'no-error-region', remedy: 'add aria-describedby="error-id" + ' } continue descEl = document.getElementById(descId.split(/\s+/)[0]) if !descEl: yield { selector: cssPath(i), fail: 'aria-describedby-target-missing', target: descId }

// 3. Detect alert()-based validation (anti-pattern) if js && /\balert\s*(/.test(js) && /onsubmit|addEventListener(['"]submit/.test(js): yield { selector: cssPath(f), fail: 'alert-based-validation', remedy: 'replace alert() with inline error region' }

Validates

@community/rule-form-validation-inline

Severity

high

Failure Message Template

Form '{selector}' fails inline-validation: {fail}. {remedy}. See pattern @community/pattern-form-validation-inline for canonical implementation.

Evaluation Method

automated + manual

Tools

• axe-core
• playwright
• regex
• @anthropic/claude-code

False Positive Rate

medium

Validates

@community/rule-form-validation-inline

Severity

high

Failure Message Template

Form '{selector}' fails inline-validation: {fail}. {remedy}. See pattern @community/pattern-form-validation-inline for canonical implementation.

Evaluation Method

automated + manual

Tools

• axe-core
• playwright
• regex
• @anthropic/claude-code

False Positive Rate

medium