Overview

Validation Manager (SK.ValidationManager) and Validator (SK.Validator) are helper classes that make field validation much easier. The Validation Manager accepts a form element as construction argument, searches for all fields that have validators metadata, attaches the validators to them and observes their value change in order to validate it. SK.ValidationManager class is used to bootstrap the validation and SK.Validator is an abstract class that wraps common functionality and it needs to be extended (used as base constructor) when creating validators.

 

Include Resource Files

Please note that the file dependencies may already exist in the environment and you may not need to include these.

  • /Shared/Scripts/validation_manager.js 
    <script type="text/javascript" src="/Shared/Scripts/validation_manager.js"></script>

 

Default Options

The Default Options represent an empty object. When Validation Manager is inititialized the events onSuccess and onError should be defined within the Default Options.

 

Methods

Name Description Parameters Returns
validate Performs validation. Mixed (the value to validate) Object (Success or Error)
getValidator Returns Validator object by given name. String (Validator's name) Object (Validator)

 

Events

Name Description Arguments
onError Fires an event when the validation fails. Object (Validator), Object (DOMElement or Object implementing MooTools.Events)
onSuccess Fires an event when the validation is successfull (if onError event creates an element to display error message onSuccess event removes it.). Object (Validator), Object (DOMElement or Object implementing MooTools.Events)

 

List of Validators

Name Description
not-empty Performs a non-empty string validation.
number Performs a number validation (valid values are 5, 1.095, "-0.8").

 

Examples

 

  • Init the Validation Manager, add not empty validator and create new validator for email:
<!-- Resource files -->
<script type="text/javascript" src="/Shared/Scripts/validation_manager.js"></script>

<!-- HTML -->
<div id="my-form">
   <div class="fieldset">
      <div class="label"><label>My not empty textfield</label></div>
      <div class="field"><input type="text" validators="['not-empty']"></div>
   </div>
   <div class="fieldset">
      <div class="label"><label>My Email textfield</label></div>
      <div class="field"><input type="text" validators="['email']"></div>
   </div>
</div>

<!-- JavaScript -->
<!-- init the ValidationManager over all elements in a form -->
<!-- (no need to be a <form> element, just an element) -->
<script type="text/javascript">
var default_options = {
   onError     : function ( element, validator_id, message ) {
      // some custom error handling
      // for the example, let's create an error message next to the field
      var error_elem = new Element('p', {
         'class'  : 'error-message',
         text     : message
      }).inject( element, 'after' );
      // lets store the error element so we can destroy it later
      element.store( 'error_elem', error_elem );
   },
   
   onSuccess   : function ( element, validator_id, message ) {
      // lets remove any error message (if there is such)
      var error_elem = element.retrieve('error_elem');
      if ( error_elem ) {
         error_elem.destroy();
      }
   }   
};
new SK.ValidationManager( $$('div.fieldset')[0], default_options );

// Adding Validator
SK.Validator.NotEmpty = new Class({
   
   Extends  : SK.Validator,   // we extend the base constructor
   
   /**
    * @function validate
    * performs validation
    * @param value: Mixed - the value to validate
   **/
   validate : function ( value ) {
      // custom validation here...
      if ( $type(value) == 'string' && value.length ) {
         // call parent onSuccess method
         // we may also pass a message, but it's optional
         this.returnSuccess('This field passes validation.');
      } else {
         // call parent onError method
         this.returnError('This field must not be empty.');
      }
   }
   
});

// Register Validator
SK.Validators.addValidator( 'not-empty', SK.Validator.NotEmpty );

// Adding new Validator for email
SK.Validator.Email = new Class({
   
   Extends  : SK.Validator,
   
   validator : /^(mailto\:)?[a-zA-Z0-9\._%\+\-]+@[a-zA-Z0-9\.\-]+\.[a-zA-Z]{2,4}\??/,
   
   validate : function ( value ) {
      if ( this.validator.test( value ) ) {
         return this.returnSuccess('Email is OK');
      }
      else {
         return this.returnError('Please enter valid email address');
      }
   }
   
});

// Register Validator for email
SK.Validators.addValidator( 'email', SK.Validator.Email );
</script>