Validation

Form Gadget has a number of built-in validations that operate in the browser as well as the server.

All built-in validation can be done using the custom data-validate attribute.

Required

If a field is marked required, then it must be included before the form can be submitted.

<label>
    <span>First Name</span>
    <input type="text" name="firstName" placeholder="First Name" data-validate="required" />
</label>

In the special cases of radio buttons and checkboxes, where elements can share a single name and are considered a group if at least one of the inputs has a value of input.checked == true then all are considered valid.

Radio Buttons:

<label>
  <span>Radio Button Value 1</span>
  <input name="rb" type="radio" value="rb1" data-validate="required" />
</label>
<label>
  <span>Radio Button Value 2</span>
  <input name="rb" type="radio" value="rb2" data-validate="required"/>
</label>

Checkboxes

<label>
  <span>Checkboxes Value 1</span>
  <input name="cb" type="checkbox" value="cb1" data-validate="required" />
</label>
<label>
  <span>Radio Button Value 2</span>
  <input name="cb" type="checkbox" value="cb2" data-validate="required"/>
</label>

---

Email

Email validation uses a Regex to validate email addresses. It does not conform to 100% of the email address specification but does achieve very high compliance and is appropriate for 99.99% of websites or data collection purposes.

It can be used in conjunction with the required attribute as follows:

<input type="text" name="email" placeholder="Email" data-validate="required email" />

Validation Events

See the Events page for a full list of events.