HTML Course 9.7 Native browser validation (novalidate, validation attributes)

HTML Course 9.7: Native Browser Validation

Overview

Native browser validation leverages built‐in form and input attributes to verify user input before submission. It reduces the need for custom JavaScript validation, enforces constraints consistently, and improves accessibility by adopting browser‐standard messages.

1. Disabling Native Validation: novalidate

By default, browsers validate fields marked with constraint attributes (e.g., required, pattern). To turn off native validation for an entire form, add the novalidate attribute:

  
  
    Email:
    
  
  Send

  

Alternatively, you can disable validation via JavaScript:

2. Core Constraint Attributes

These attributes can be applied to <input>, <textarea>, and <select> elements:

• required – field must not be empty
• pattern='regex' – matches input against a regular expression
• min / max – numeric or date limits
• minlength / maxlength – enforce character count
• step – numeric granularity (e.g., step=’0.01′)
• type – built‐in types like email, url, number, date
• multiple – allow multiple values (e.g., multiple email addresses)
• title – custom tooltip and pattern guidance

Example: Email, Password, Age

  
  
    Full Name:
    
    
  

  
  
    Email Address:
    
  

  
  
    Password:
    
  

  
  
    Age:
    
  

  Register

  

3. Constraint Validation API

JavaScript can interact with validation state via the Constraint Validation API:

• element.checkValidity() – returns true if all constraints pass
• element.reportValidity() – shows validation UI and returns boolean
• element.validity – object containing flags like valueMissing, patternMismatch, rangeOverflow, etc.
• element.validationMessage – browser’s localized message for the first failing constraint
• element.setCustomValidity(msg) – override the default message (empty string = no custom error)

Example: Custom Submit Handling

  
    Username:
    
  
  Sign Up



  

4. Customizing Validation Messages

Use setCustomValidity in event handlers to provide user‐friendly messages:

  Email:
  
  Submit



  

5. Browser Support and Accessibility

• All modern browsers support constraint attributes and basic API.
• Always provide meaningful title or aria-describedby for screen readers.
• Test without JavaScript to ensure graceful degradation (e.g., server‐side validation fallback).

Key Takeaways

1. Native validation reduces custom code and ensures consistency.
2. Use novalidate to disable built‐in checks when custom logic is preferred.
3. Leverage constraint attributes (required, pattern, type, etc.) for declarative rules.
4. Interact via the Constraint Validation API for advanced workflows and custom messages.