Forms and Form Validation

Forms - Contact and more Complex

• form-contact.html
• form-all.html

Doing things with forms

• form-contact-email.html
  Course Form Submit Script relies on hidden parameters. This uses a custom script on the server side that sends email through the Mailgun service.
• form-contact-formspree.html
  Formspree is a form backend, API, and email service for HTML & JavaScript forms. It's the simplest way to embed custom contact us forms, order forms, or email capture forms on your static website.

Using HTML5 and native browser capabilities

• form1-browser.html
• form1-browser-novalidate.html

Form validation DIY (Do It Yourself) with JS

• form1-diy.html

Form validation with PristineJS Library

PristineJS is a vanilla javascript form validation micro-library.

It has sensible default behavior, and we can easily style Pristine messages by specifying CSS rules for the classes has-success, has-danger, and text-help

A key point to using Pristine is to include the form-group class on the element that any Pristine messages will be appended. For everything but radio and checkbox inputs, the label element works well for this. For radio and checkbox, the fieldset that contains the radio or checkbox group is a good choice.

• form1-pristine.html - Basic demo of Pristine.
• form2-pristine.html - More involved demo, with use of a custom pattern.
• form3-pristine.html - Demonstrating validating "NetID" pattern with a custom validator. From a markup perspective, the netid validation is designated by the data-pristine-type="netid" attribute/value on the input. In the JS, we select the elements with that attribute/value and set the validation logic.

Form validation with Validate.js Library

Validate.js provides a declarative way of validating javascript objects. The bulk of the work needs to be on the implementor side of things (that's us) for HTML forms, but validate.js does provide a good library of core validation functions.

• form1-validatejs.html
• form2-validatejs.html