Tutorial Part 1 • Part 2 • Part 3 • Part 4 • Live demo

How to use Mootools Formvalidator effectively – a tutorial in 4 parts

This additional part contains stuff that didn’t fit in the previous parts and things I’ve been asked (or asked myself) afterwards.

Optional minimum length

Imagine something like this: A user can enter her postcode (which by any weird definition has to contain at least 5 characters) but isn’t required to. So the field can either be empty or – if it’s filled – it has to contain 5 or more characters.

A custom validator could look like this:

FormValidator.add('optionalMinLength', {
   errorMsg: function(element, props) {
      return 'Leave this empty or enter at least ' + props.optionalMinLength + ' chars';
   },
   test: function(element,props) {
      if (element.value.length > 0 && element.value.length < props.optionalMinLength) {
         return false;
      }
   return true;
   }
});

Usage:

   <input type="text" name="postcode" class="optionalMinLength:5" />

How does it work? The test function is similar to the ones before: First we check if our element has a length of at least one – if so (something is filled in) we compare it to our property (here: optionalMinLength). And if the element is too short, the test fails.

One thing to notice here is the error message – instead of using a simple text we can apply the same arguments to the function as we use for the test method: The element and properties. So we can print our error message dynamically by inserting the number of required characters.

Shipping Address Example

Depending on a user selection, some fields might change their required-status. A common example would be a shopping cart where you select Ship to another address – in this case the shipping address fields would become required.

This works out-ouf-the-box if you include the Form.Validator.Extras-package. Here’s an example:

   <label for="shipping">Ship to a different address?</label>
   <input type="checkbox" class="validate-toggle-oncheck toToggleChildrenOf:'shippingfields'" id="shipping" name="profile[shipping]" />
         
   <div id="shippingfields">
         
      <label for="ship_street">Shiping address</label>
      <input type="text" class="required" id="ship_street" name="profile[ship_street]" />

      <label for="ship_city">Shiping city</label>
      <input type="text" class="required" id="ship_city" name="profile[ship_city]" />

   </div>

The validate-toggle-oncheck validator toggles all the fields which are children of the ID you provide. In this case we simply added a DIV with the ID “shippingfields” and put all the fields which depend on this checkbox insde.

So if the checkbox is not selected, the shipping address-fields are ignored – otherwise they are validated.

You can also provide a list of fields to toggle:

   <input type="checkbox" class="validate-toggle-oncheck toToggle:['ship_street','ship_city']" id="shipping" name="profile[shipping]" />

Shipping address improved

The previous example has one small disadvantage when it comes to usability: If you’d like to mark required fields with a * you can’t put the asterisk on the shipping address fields, since that depends. But we can improve the general usability by simple toggling their visibility:

   <label for="shipping">Ship to a different address?</label>
   <input type="checkbox" onclick="$('shippingfields').toggleClass('hidden')" class="validate-toggle-oncheck toToggleChildrenOf:'shippingfields'" id="shipping" name="profile[shipping]" />
         
   <div id="shippingfields" class="hidden">
         
      <label for="ship_street">Shiping address</label>
      <input type="text" class="required" id="ship_street" name="profile[ship_street]" />

      <label for="ship_city">Shiping city</label>
      <input type="text" class="required" id="ship_city" name="profile[ship_city]" />

   </div>

The CSS-class hidden is defined as display:none


More to follow….