Form Validator

• Introduction
• Basic Example
• Real World Example

Provides a method of ensuring the validity of form entries.

---

Getting Started

First load the seed and CSS files, if you haven't yet.

<script src="https://cdn.alloyui.com/3.0.1/aui/aui-min.js"></script>
<link href="https://cdn.alloyui.com/3.0.1/aui-css/css/bootstrap.min.css" rel="stylesheet"></link>

Then initialize AlloyUI and load the Form Validator module.

YUI().use(
  'aui-form-validator',
  function(Y) {
    // code goes here
  }
);

---

Using Form Validator

In order to validate form entries, a form must first be created in HTML.

<form id="myForm">
  <div class="control-group">
    <label class="control-label" for="name">Name:</label>
    <div class="controls">
      <input name="name" id="name" type="text">
    </div>
  </div>
</form>

Set boundingBox to the form id, pass in the input element name under rules, and set required to true.

YUI().use(
  'aui-form-validator',
  function(Y) {
    new Y.FormValidator(
      {
        boundingBox: '#myForm',
        rules: {
          name: {
            required: true
          }
        }
      }
    );
  }
);

Now, if the user attempted to subit the form without filling out the name field, they would receive an alert reading, "This field is required."

---

Configuring Form Validator

Further requirements can be specified depending on the input type. For example, if the form input is for an email address, Form Validator can ensure that the text entered is a valid email address by setting email to true.

YUI().use(
  'aui-form-validator',
  function(Y) {
    new Y.FormValidator(
      {
        boundingBox: '#myForm',
        rules: {
          email: {
            email: true,
            required: true
          }
        }
      }
    );
  }
);

The same can be done for various other inputs.

YUI().use(
  'aui-form-validator',
  function(Y) {
    new Y.FormValidator(
      {
        boundingBox: '#myForm',
        rules: {
          age: {
            digits: true,
            required: true
          },
          name: {
            rangeLength: [2,50],
            required: true
          },
          url: {
            required: true,
            url: true
          }
        }
      }
    );
  }
);

Further configuration includes creating custom alerts that are displayed when invalid content is entered into a field (this replaces the default "This feild is required" message).

YUI().use(
  'aui-form-validator',
  function(Y) {
    new Y.FormValidator(
      {
        boundingBox: '#myForm',
        fieldStrings: {
          name: {
            required: 'We need your name! (Custom message)'
          }
        },
        rules: {
          name: {
            required: true
          }
        }
      }
    );
  }
);

Furthermore, the requirements can be customized beyond the default parameters. For example, one input can have the requirement of being equal to the content entered into another field.

YUI().use(
  'aui-form-validator',
  function(Y) {
    new Y.FormValidator(
      {
        boundingBox: '#myForm',
        rules: {
          email: {
            email: true,
            required: true
          },
          emailConfirmation: {
            email: true,
            equalTo: '#email',
            required: true
          }
        }
      }
    );
  }
);