Over the last few articles in this series, we've learned how to use a handful of input types and validation attributes to natively validate forms.
We've learned how to use the Constraint Validation API to enhance the native browser validation process for a better overall user experience.
The `mc-validate.js` script provided by Mail Chimp doesn't just validate the form.
It also submits it with Ajax and displays a status message.
Server-side validation is enough to have a successful and secure form validation.
For better user experience, however, you might consider using client-side validation.
Now, let's take what we've learned and apply it to a real example: the Mail Chimp signup form.
See the Pen Form Validation: Mail Chimp with the API Script and Polyfills by Chris Ferdinandi (@cferdinandi) on Code Pen.
That brings our total file size up to 15.5kb unminified—still 9× smaller than the Mail Chimp validation script.
When you click submit on our modified form, it redirects the visitor to the Mail Chimp site. But, we can also recreate Mail Chimp's Ajax form submission without j Query for a better user experience.
The first thing we want to do is prevent the form from submitting via a page reload like it normally would.