TJ's public fiddles
-
3FMry
jQuery (edge), HTML, CSS, JavaScript
-
pgKfb
jQuery (edge), HTML, CSS, JavaScript
-
AczKU
jQuery (edge), HTML, CSS, JavaScript
-
9CSxm
jQuery 1.8.3, HTML, CSS, JavaScript
-
7SgsX
jQuery (edge), HTML, CSS, JavaScript
-
dRhpg
Mootools 1.4.5, HTML, CSS, JavaScript
-
G9jCE
Mootools 1.4.5, HTML, CSS, JavaScript
-
A6xf4
jQuery (edge), HTML, CSS, JavaScript
-
L5Gdg
jQuery (edge), HTML, CSS, JavaScript
-
Bug: The tooLong property is not enforced in Chrome and Firefox
No-Library (pure JS), HTML, CSS, JavaScript
-
Password Matching Validation with Custom Error Messages
An example of how you can implement your own error messages using the constraint validation API.
-
The formnovalidate Attribute Prevents Form Submissions
When present the formnovalidate attribute makes it so that a form isn't validated when the corresponding button / input is clicked.
-
Workaround for Safari not Preventing Form Submissions with Invalid Data
Safari as of version 6 does not prevent form submissions of invalid data. This technique applies a workaround for all forms on the DOM.
-
H5F Constraint Validation Polyfill - Basic Example
A basic example showing how H5F can be used to polyfill HTML5 form validation.
-
Webshims Constraint Validation Polyfill - Basic Example
A basic example showing how Webshims can be used to polyfill native HTML5 form validation.
-
:invalid & :valid - Only Take Effect after Interaction
By default the :invalid & :valid pseudoselectors take affect immediately. This solution shows one way of not changing the UI until fields have been interacted with.
-
:invalid & :valid
Showing that the :invalid and :valid pseudoselectors are applied immediately, even before a field is interacted with.
-
patternMismatch will Display the title Attribute in the Validation Bubble
When a patternMismatch occurs on a form submission attempt the browser is required to display the contents of the title attribute in the validation message displayed to the user.
-
x-moz-errormessage Attribute
An example showing the x-moz-errormessage can be used to set a element's validationMessage in a declarative way.
-
Password Matching Validation
Mootools 1.4.5, HTML, CSS, JavaScript