The out-of-box experience isn’t quite what you want. It’s good that our form won’t try to submit invalid data I wasn’t sure how to validate a form that was never submitted. Eventually, I discovered the simplest solution by hooking into the input’s input gets focused and screen readers read out the error message for that input. If this is unacceptable, is a pretty small (32kb minfied / 9kb gzipped) reimplementation of the same HTML5 Form Validation API in Java Script, but with additions to iron out some weird parts.
If you like your forms to immediately flag errors after leaving each input (which that’s fine, I’m not judging), it’s pretty easy to add that functionality. See the Pen Native form validation onsubmit with pattern?? It doesn’t look the coolest, but it works really well for casual client-side validation.
I looked for lightweight form validation scripts but after some hemming and hawing I decided to try my hand (again) at native HTML5 Form Validation. Instead of being perscriptive about error messaging, we use what the browser natively gives us.
If you’ve ever experimented with HTML5 Form Validation, you’ve probably been disappointed. 💪 We’re also leveraging HTML5 input types for common pattern matching. We’re of course doing server-side validation and are free to style those errors however we want (usually that’s a more critical error and needs a better UX).
If the 'before Submit' callback returns false then the form will not be submitted.
The 'before Submit' callback is invoked with three arguments: the form data in array format, the j Query object for the form, and the Options Object passed into ajax Form/ajax Submit. Set to true to remove short delay before posting form when uploading files (or using the iframe option).
Submitting a form with AJAX doesn't get any easier than this!
Both of these methods support numerous options which allows you to have full control over how the data is submitted.
Behold, regex pattern matching in ZERO lines of Java Script!
Let me know if you try this and have any problems with the approach.
As of version .91, this method always returns an array. This method emptys all of the text inputs, password inputs and textarea elements, clears the selection in any select elements, and unchecks all radio and checkbox inputs. Callback function to be invoked before the form is submitted.
If no valid value can be determined the array will be empty, otherwise it will contain one or more values. The 'before Submit' callback can be provided as a hook for running pre-submit logic or for validating the form data.