As a best practice, we should add this attribute with Java Script so that if our script has an error or fails to load, the native browser form validation will still work.
There are a few different methods the API exposes, but the most powerful, Validity State, allows us to use the browser's own field validation algorithms in our scripts instead of writing our own.
In this article, I'm going to show you how to use Validity State to customize the behavior, appearance, and content of your form validation error messages.
We'll do this by adding a listener for the class, we'll get every field, loop through each one, and check for errors.
We'll store the first invalid field we find to a variable and bring it into focus when we're done.
Any suggestions to resolve this would be greatly appreciated!
When you submit a form to a CGI program that resides on the server, it is usually programmed to do its own check for errors.
If the field is a radio button or checkbox, we need to change how we add our error message to the DOM.
The field label often comes after the field, or wraps it entirely, for these types of inputs.
Our finished script weight just 6kb (2.7kb minified). It works in all modern browsers and provides support IE support back to IE10. Here's the good news: with a lightweight polyfill (5kb, 2.7kb minified) we can extend our browser support all the way back to IE9, and add missing properties to partially supporting browsers, without having to touch any of our core code.
On my Share Point Nintex form, I'd like to validate that a checkbox field has been checked when the item is being saved.
Rather than apply our validation script to all forms, let's apply it just to forms that have the See the Pen Form Validation: Add `novalidate` programatically by Chris Ferdinandi (@cferdinandi) on Code Pen.