Add native validation attribute for declarative input validation

[mtechamit]

What problem are you trying to solve?

Today, web developers must write custom JavaScript to validate form inputs such as names, emails, phone numbers, passwords, and password confirmation.
This adds complexity, increases page load, can create inconsistencies across browsers, and is especially challenging for beginners.

A native validation attribute on elements would allow declarative validation, enabling the browser to automatically handle error messages, real-time feedback, and optional features like password strength or visibility toggle.

Live Demo: https://mtechamit.github.io/adaptive-form-validation/
GitHub Repository: https://github.com/mtechamit/adaptive-form-validation

What solutions exist today?

• Custom JS validation libraries (e.g., Parsley.js, Formik)
• HTML5 built-in attributes (required, type="email", pattern)
• Browser inconsistencies for complex validations (password strength, confirm password, international phone numbers)
• While these work, they require extra JS/CSS, are not fully standardized, and often introduce boilerplate code.

How would you solve it?

Introduce a standardized validation attribute for elements:

• Browser validates automatically based on the value of validation (e.g., name, phone, email, password, confirm)
• Generates native error messages if input is invalid
• Optional visual enhancements: password strength bar, show/hide toggle
• Fully backward compatible: unsupported browsers ignore the attribute

<input type="text" validation="name" placeholder="Full Name">
<input type="tel" validation="phone" placeholder="+1 123 456 7890">
<input type="password" validation="password" placeholder="Password">
<input type="password" validation="confirm" for="password" placeholder="Confirm Password">

Anything else?

Benefits

• No JS required → lightweight, faster, and more secure
• Consistent validation across all browsers
• Integrates with browser features: autofill, password managers, accessibility
• Easy for beginners
• Reduces development time and errors
• Extensible for future custom types

[annevk]

I don't really understand what is being suggested here. The built-in attributes you reference are exactly what provide declarative form validation today.

[mtechamit]

Hi @annevk — thank you for responding!

You’re right that HTML already supports basic declarative validation via type, required, and pattern.
My suggestion is to extend that concept to support higher-level, real-world validation patterns that currently require custom JavaScript.

For example, fields like:

• validation="confirm" → confirm password matching another input
• validation="password" → native password strength check
• validation="phone" → standardized international phone format
• validation="name" → simple alphabetic name validation

Example usage:

These are extremely common across the web, but currently every developer must implement them manually with JS or third-party libraries.

The idea is not to replace type or pattern, but to propose a browser-native, semantic, and standardized validation attribute that covers these advanced cases consistently — similar in spirit to how type="email" simplified email validation.

It could help make forms:

• Lighter (no JS dependencies)
• More consistent across browsers
• Easier for beginners
• More accessible (using built-in error messaging)

Demo for reference:
https://mtechamit.github.io/adaptive-form-validation/

GitHub: https://github.com/mtechamit/adaptive-form-validation

This is my humble request — I would really appreciate it if the team could consider adding something like this.

Thanks again for your time! I’d love to refine this idea further based on your guidance.

[flashymittens]

validation="name" → simple alphabetic name validation

@mtechamit You really don’t want to do that. Names are hard.

[mtechamit]

Hi @flashymittens Thank you for the feedback — that’s a very good point.

I agree that “name validation” can be extremely complex across different languages and cultures. My initial idea was more about enabling browser-level declarative validation hooks (e.g., validation="name", validation="phone", etc.), not necessarily enforcing strict built-in patterns.

Instead of rigid validation logic, the attribute could define standardized presets or declarative behaviors, for example:

validation="name" → allows developers to specify a custom pattern + localized error message with native browser UI handling

validation="custom" → could reference a JSON-like schema defined inside a <script type="validation"> block for advanced use cases

The broader goal is to reduce boilerplate JavaScript and make validation more consistent, accessible, and beginner-friendly, while still keeping flexibility for complex or localized data types.

I’d be happy to collaborate further or prototype refinements if that would help clarify the idea.