Form Validation Inline
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.…
$ aoe install @community/check-form-validation-inlineProjection
Always in _index.xml · the agent never has to ask for this.
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.
Loaded when retrieval picks the atom as adjacent / supporting.
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' }
Meta
- License: Apache-2.0
- License Provenance: package-authorship-claim
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
Loaded when retrieval picks the atom as a focal / direct hit.
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' }
Meta
- License: Apache-2.0
- License Provenance: package-authorship-claim
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
Relations
related: [@community/rule-form-validation-inline, @community/check-error-message-associated, @community/pattern-inline-validation]
Meta
- License: Apache-2.0
- License Provenance: package-authorship-claim
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
Source
aoe-engine/examples/frontend-design/primes/compiled/@community/check-form-validation-inline/atom.yaml