Dash Exhibit : Validation

Validation in JavaScript is never fun, even though there are tons of JQuery libraries that make it easier. The Dash.Valid extension tries to make it as painless as possible, minimizing the JavaScript you need to write. Let's say we want to validate a registration form, as below:

Dash will allow you to validate this form without writing any JavaScript except what the button should do.

*Note* All inputs must have an ID for Dash.Valid to function properly.

HTML:

<div id="ValidDiv" data-valid-group="true">
  <table>
    <tr>
      <th>Name:</th>
      <td><input type="text" id="name" data-valid-required="true" data-valid-min-length="5" /></td>
    </tr>
    <tr>
      <th>Email:</th>
      <td><input type="text" id="email" data-valid-required="true" data-valid-email="true" /></td>
    </tr>
    <tr>
      <th>Phone:</th>
      <td><input type="text" id="phone" data-valid-required="true" data-valid-phone="true" /></td>
    </tr>
  </table>
  <button data-button="true" data-valid-trigger="click Registration.Register">Register</button>
  </div>


JS:
// The Registration Namespace
var Registration = new function ()
{
     this.Register = function ()
     {
        /* Register a User */
     }
}


The Result (messages pop up after the button is clicked or when ENTER is pressed in one of the inputs):

Now, Dash will remove those messages as soon as the inputs are valid. Once all inputs in a group are valid, submitting will call the Registration.Register function.


Dash adds an "invalid" and "valid" class to the corresponding input fields and labels, so this can be prettied up a bit with a small amount of CSS.