marijn/Validator.package.js

## example.php
<?php header("Content-Type: application/xhtml+xml; charset=utf-8"); ?>
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC
  "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
  [
    <!ATTLIST input data-validation-required (true|false) #IMPLIED>
    <!ATTLIST select data-validation-required (true|false) #IMPLIED>
    <!ATTLIST textarea data-validation-required (true|false) #IMPLIED>
    <!ATTLIST input data-validation-required (true|false) #IMPLIED>
    <!ATTLIST input data-validation-type (string|boolean) #IMPLIED>
    <!ATTLIST select data-validation-type (string|boolean) #IMPLIED>
    <!ATTLIST textarea data-validation-type (string|boolean) #IMPLIED>
    <!ATTLIST input data-validation-type (string|boolean) #IMPLIED>
  ]>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>Validation example</title>
    <script type="text/javascript">
      //<![CDATA[
        console.debug("Loading document...");
      //]]>
    </script>
  </head>
  <body>
    <form action="#validate">
      <fieldset>
        <input id="requiredTextField" type="text" data-validation-type="string" data-validation-required="true" />
        <input id="textField" type="text" data-validation-type="string" data-validation-required="false" />
      </fieldset>
    </form>
    <script type="text/javascript" src="http://base2.googlecode.com/svn/trunk/lib/base2-jsb-fp.js" ></script>
    <script type="text/javascript" src="js/Validator.package.js" ></script>
    <!--
    <script type="text/javascript" src="js/Validator.js" ></script>
    <script type="text/javascript" src="js/ValidatorString.js" ></script>
    <script type="text/javascript" src="js/ValidatorBoolean.js" ></script>
    <script type="text/javascript" src="js/ValidatorStringBehavior.js" ></script>
    -->
    <script type="text/javascript">
      //<![CDATA[
        base2.DOM.Document.addEventListener(document, "DOMContentLoaded", function ()
        {
          console.debug("DOM is ready");
        }, false);
      //]]>
    </script>
    <script type="text/javascript">
      //<![CDATA[
        base2.Validator.register("String");
      //]]>
    </script>
  </body>
</html>

## Validator.package.js
new function(_NO_SHRINK_)
{

  /**
   * Package: Validator
   *
   * Properties:
   *   name    - Validator
   *   version - 0.1
   *   exports - <ValidatorBoolean>, <ValidatorString>, <ValidatorStringBehavior>, <register>
   */
  Validator = new base2.Package(this, {
    name:    "Validator",
    version: "0.1",
    imports: "",
    exports: "ValidatorBoolean,ValidatorString,ValidatorStringBehavior,register"
  });

  eval(this.imports);

  var STRING  = 'String',
      BOOLEAN = 'Boolean';

  /**
   * Function: register
   * Register a validator.
   *
   * Parameters:
   *   arg_type - {String} The type of validator to register.
   *
   * Returns:
   *   {jsb.Rule}
   */
  var register = function (arg_type)
  {
    if ('string' !== base2.lang.typeOf(arg_type))
    {
      throw new Error('Validator.register expects a string value');
    }

    return new jsb.Rule("input[data-validation-type=" + arg_type.toLowerCase() + "]", ValidatorStringBehavior);
  };

  /**
   * Class: ValidatorAbstract
   *
   * Inherits from:
   *  - base2.Base
   */
  var ValidatorAbstract = base2.Base.extend({

    /**
     * Property: _required
     *
     * Type: boolean
     */
    _required: undefined,

    /**
     * Constructor: constructor
     *
     * Parameters:
     *   arg_required - {Boolean} Value indicating if the field is required or not.
     *
     * Returns:
     *  {void}
     */
    constructor: function (arg_required)
    {
      this._required = arg_required || true;
    },

    /**
     * Function: execute
     *
     * Parameters:
     *   arg_input - {String} The input to validate
     *
     * Returns:
     *  {Boolean} A value indicating that the data is valid.
     *
     * Throws:
     *  {Error} When the value inserted is not valid.
     */
    execute: function (arg_input)
    {
;;;   console.log("input: '%s'", arg_input);

      if (this._required && (undefined === arg_input || "" === arg_input || null === arg_input))
      {
        throw new Error("Input value required");
      }

      return true;
    }

  });

  /**
   * Class: ValidatorBoolean
   *
   * Inherits from:
   *  - <ValidatorAbstract>
   */
  var ValidatorBoolean = ValidatorAbstract.extend({
  });

  /**
   * Class: ValidatorString
   *
   * Inherits from:
   *  - <ValidatorAbstract>
   */
  var ValidatorString = ValidatorAbstract.extend(
  {

    _maximum_length: undefined,

    /**
     * Constructor: constructor
     *
     * Parameters:
     *   arg_required - {Boolean} Value indicating if the field is required or not.
     *   arg_maximum  - {Integer} Value indicating the maximum field length
     *
     * Returns:
     *  {void}
     */
    constructor: function (arg_required, arg_maximum)
    {
      this.base(arg_required);

      this._maximum_length = arg_maximum || null;
    }

    /**
     * Function: execute
     *
     * Parameters:
     *   arg_input - {String} The input to validate
     *
     * Returns:
     *  {Boolean} A value indicating that the data is valid.
     *
     * Throws:
     *  {Error} When the value inserted is not valid.
     */
    execute: function (arg_input)
    {
      var result = this.base(arg_input);

      if (null !== this._maximum_length && arg_input.length > this._maximum_length)
      {
        throw new Error("Input value exceeds maximum size");
      }

      return true;
    }

  });

  /**
   * Class: ValidatorStringBehavior
   *
   * Inherits from:
   *  - jsb.behavior
   */
  var ValidatorStringBehavior = jsb.behavior.extend({

    /**
     * Property: _validator
     *
     * Type: Validator
     */
    _validator: undefined,

    /**
     * Property: _errors
     *
     * Type: Array
     */
    _errors: [],

    /**
     * Function: onattach
     *
     * Parameters:
     *   arg_element - {base2.DOM.Element} The element bound to the event.
     *
     * Returns:
     *   {void}
     */
    onattach: function (arg_element)
    {
;;;   console.log("attaching behavior for element: %o", arg_element);

      this.setStyle(arg_element, "background-color", "green");

      this._validator = new ValidatorString(this.getAttribute(arg_element, "data-validation-required"));
    },

    /**
     * Function: onkeyup
     *
     * Parameters:
     *   arg_element - {base2.DOM.Element} The element bound to the event.
     *
     * Returns:
     *   {void}
     */
    onkeyup: function (arg_element)
    {
;;;   console.log("key up");

      try
      {
;;;     console.log("data is: %s", this._validator.execute(arg_element.value) ? "valid" : "invalid");
      }
      catch (arg_error)
      {
        this._errors.push(arg_error);
      }
    },

    /**
     * Function: onblur
     *
     * Parameters:
     *   arg_element - {base2.DOM.Element} The element bound to the event.
     *
     * Returns:
     *   {void}
     */
    onblur: function (arg_element)
    {
;;;   console.log("blur");

      if (0 < this._errors.length)
      {
        this.setStyle(arg_element, "background-color", "red");
      }

;;;   console.log("%o", this._errors);
    }

  });

  eval(this.exports);
};
	<?php header("Content-Type: application/xhtml+xml; charset=utf-8"); ?>
	<?xml version="1.0" encoding="utf-8"?>
	<!DOCTYPE html PUBLIC
	"-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
	[
	<!ATTLIST input data-validation-required (true\|false) #IMPLIED>
	<!ATTLIST select data-validation-required (true\|false) #IMPLIED>
	<!ATTLIST textarea data-validation-required (true\|false) #IMPLIED>
	<!ATTLIST input data-validation-required (true\|false) #IMPLIED>
	<!ATTLIST input data-validation-type (string\|boolean) #IMPLIED>
	<!ATTLIST select data-validation-type (string\|boolean) #IMPLIED>
	<!ATTLIST textarea data-validation-type (string\|boolean) #IMPLIED>
	<!ATTLIST input data-validation-type (string\|boolean) #IMPLIED>
	]>
	<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
	<title>Validation example</title>
	<script type="text/javascript">
	//<![CDATA[
	console.debug("Loading document...");
	//]]>
	</script>
	</head>
	<body>
	<form action="#validate">
	<fieldset>
	<input id="requiredTextField" type="text" data-validation-type="string" data-validation-required="true" />
	<input id="textField" type="text" data-validation-type="string" data-validation-required="false" />
	</fieldset>
	</form>
	<script type="text/javascript" src="http://base2.googlecode.com/svn/trunk/lib/base2-jsb-fp.js" ></script>
	<script type="text/javascript" src="js/Validator.package.js" ></script>
	<!--
	<script type="text/javascript" src="js/Validator.js" ></script>
	<script type="text/javascript" src="js/ValidatorString.js" ></script>
	<script type="text/javascript" src="js/ValidatorBoolean.js" ></script>
	<script type="text/javascript" src="js/ValidatorStringBehavior.js" ></script>
	-->
	<script type="text/javascript">
	//<![CDATA[
	base2.DOM.Document.addEventListener(document, "DOMContentLoaded", function ()
	{
	console.debug("DOM is ready");
	}, false);
	//]]>
	</script>
	<script type="text/javascript">
	//<![CDATA[
	base2.Validator.register("String");
	//]]>
	</script>
	</body>
	</html>
	new function(_NO_SHRINK_)
	{

	/**
	* Package: Validator
	*
	* Properties:
	* name - Validator
	* version - 0.1
	* exports - <ValidatorBoolean>, <ValidatorString>, <ValidatorStringBehavior>, <register>
	*/
	Validator = new base2.Package(this, {
	name: "Validator",
	version: "0.1",
	imports: "",
	exports: "ValidatorBoolean,ValidatorString,ValidatorStringBehavior,register"
	});

	eval(this.imports);

	var STRING = 'String',
	BOOLEAN = 'Boolean';

	/**
	* Function: register
	* Register a validator.
	*
	* Parameters:
	* arg_type - {String} The type of validator to register.
	*
	* Returns:
	* {jsb.Rule}
	*/
	var register = function (arg_type)
	{
	if ('string' !== base2.lang.typeOf(arg_type))
	{
	throw new Error('Validator.register expects a string value');
	}

	return new jsb.Rule("input[data-validation-type=" + arg_type.toLowerCase() + "]", ValidatorStringBehavior);
	};

	/**
	* Class: ValidatorAbstract
	*
	* Inherits from:
	* - base2.Base
	*/
	var ValidatorAbstract = base2.Base.extend({

	/**
	* Property: _required
	*
	* Type: boolean
	*/
	_required: undefined,

	/**
	* Constructor: constructor
	*
	* Parameters:
	* arg_required - {Boolean} Value indicating if the field is required or not.
	*
	* Returns:
	* {void}
	*/
	constructor: function (arg_required)
	{
	this._required = arg_required \|\| true;
	},

	/**
	* Function: execute
	*
	* Parameters:
	* arg_input - {String} The input to validate
	*
	* Returns:
	* {Boolean} A value indicating that the data is valid.
	*
	* Throws:
	* {Error} When the value inserted is not valid.
	*/
	execute: function (arg_input)
	{
	;;; console.log("input: '%s'", arg_input);

	if (this._required && (undefined === arg_input \|\| "" === arg_input \|\| null === arg_input))
	{
	throw new Error("Input value required");
	}

	return true;
	}

	});

	/**
	* Class: ValidatorBoolean
	*
	* Inherits from:
	* - <ValidatorAbstract>
	*/
	var ValidatorBoolean = ValidatorAbstract.extend({
	});

	/**
	* Class: ValidatorString
	*
	* Inherits from:
	* - <ValidatorAbstract>
	*/
	var ValidatorString = ValidatorAbstract.extend(
	{

	_maximum_length: undefined,

	/**
	* Constructor: constructor
	*
	* Parameters:
	* arg_required - {Boolean} Value indicating if the field is required or not.
	* arg_maximum - {Integer} Value indicating the maximum field length
	*
	* Returns:
	* {void}
	*/
	constructor: function (arg_required, arg_maximum)
	{
	this.base(arg_required);

	this._maximum_length = arg_maximum \|\| null;
	}

	/**
	* Function: execute
	*
	* Parameters:
	* arg_input - {String} The input to validate
	*
	* Returns:
	* {Boolean} A value indicating that the data is valid.
	*
	* Throws:
	* {Error} When the value inserted is not valid.
	*/
	execute: function (arg_input)
	{
	var result = this.base(arg_input);

	if (null !== this._maximum_length && arg_input.length > this._maximum_length)
	{
	throw new Error("Input value exceeds maximum size");
	}

	return true;
	}

	});

	/**
	* Class: ValidatorStringBehavior
	*
	* Inherits from:
	* - jsb.behavior
	*/
	var ValidatorStringBehavior = jsb.behavior.extend({

	/**
	* Property: _validator
	*
	* Type: Validator
	*/
	_validator: undefined,

	/**
	* Property: _errors
	*
	* Type: Array
	*/
	_errors: [],

	/**
	* Function: onattach
	*
	* Parameters:
	* arg_element - {base2.DOM.Element} The element bound to the event.
	*
	* Returns:
	* {void}
	*/
	onattach: function (arg_element)
	{
	;;; console.log("attaching behavior for element: %o", arg_element);

	this.setStyle(arg_element, "background-color", "green");

	this._validator = new ValidatorString(this.getAttribute(arg_element, "data-validation-required"));
	},

	/**
	* Function: onkeyup
	*
	* Parameters:
	* arg_element - {base2.DOM.Element} The element bound to the event.
	*
	* Returns:
	* {void}
	*/
	onkeyup: function (arg_element)
	{
	;;; console.log("key up");

	try
	{
	;;; console.log("data is: %s", this._validator.execute(arg_element.value) ? "valid" : "invalid");
	}
	catch (arg_error)
	{
	this._errors.push(arg_error);
	}
	},

	/**
	* Function: onblur
	*
	* Parameters:
	* arg_element - {base2.DOM.Element} The element bound to the event.
	*
	* Returns:
	* {void}
	*/
	onblur: function (arg_element)
	{
	;;; console.log("blur");

	if (0 < this._errors.length)
	{
	this.setStyle(arg_element, "background-color", "red");
	}

	;;; console.log("%o", this._errors);
	}

	});

	eval(this.exports);
	};