Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Do any browsers yet support HTML5's checkValidity() method?
Yes, modern browsers widely support HTML5's checkValidity() method. This method validates form elements against their HTML5 constraints and returns true if valid, false otherwise.
Browser Support
The checkValidity() method is supported in all modern browsers including Chrome, Firefox, Safari, Edge, and Opera. It's been widely supported since around 2012-2013.
Syntax
element.checkValidity()
Return Value
Returns true if the element meets all validation constraints, false otherwise.
Example
<!DOCTYPE html>
<html>
<body>
<style>
.valid {
color: #0B7866;
}
.invalid {
color: #0B6877;
}
</style>
<div id="result"></div>
<script>
function check(input) {
var out = document.getElementById('result');
if (input.validity) {
if (input.validity.valid === true) {
out.innerHTML = "<span class='valid'>" + input.id + " valid</span>";
} else {
out.innerHTML = "<span class='invalid'>" + input.id + " not valid</span>";
}
}
console.log(input.checkValidity());
}
</script>
<form id="testform" onsubmit="return false;">
<label>Minimum (enter 4 or higher):
<input oninput="check(this)" id="min_input" type="number" min="4" />
</label><br>
</form>
</body>
</html>
How It Works
The example demonstrates checkValidity() with a number input that has a minimum value of 4. When you type in the input field, the check() function runs and validates the input using both input.validity.valid and input.checkValidity().
Key Points
-
checkValidity()works with all HTML5 input types and validation attributes - It checks constraints like
required,min,max,pattern, etc. - The method triggers validation but doesn't show browser validation messages
- Use
reportValidity()if you want to show validation messages
Conclusion
The checkValidity() method is well-supported across modern browsers and provides an easy way to validate form elements programmatically. It's a reliable feature for client-side form validation in HTML5 applications.
210 Views
