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.Form validation is natively supported by the browser, but sometimes different browsers will handle things in a manner which makes relying on it a bit tricky. Let’s look at the HTML first: is a temporary URL that would point to something real on a server someplace (where you have backup server-side validation of course).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.
Let's setup a separate function for this and pass our field into it.
// If too short if (Short) return 'Please lengthen this text to ' Attribute('min Length') ' characters or more.
You are currently using ' field.value.length ' characters.'; // If too long if (Long) return 'Please short this text to no more than ' Attribute('max Length') ' characters.
You are currently using ' field.value.length ' characters.';// If a number field is over the max if (validity.range Overflow) return 'Please select a value that is no more than ' Attribute('max') '.'; // If a number field is below the min if (validity.range Underflow) return 'Please select a value that is no less than ' Attribute('min') '.'; See the Pen Form Validation: Display the Error by Chris Ferdinandi (@cferdinandi) on Code Pen.
Once we show an error, your visitor will (hopefully) fix it.