formvalidator.js

(function ($) {

  /**
  * Override console in this scope so we can squash errors.
  */
  var con = window.console;
  var console = {
    log: function () {
      con && con.log && con.log(Array.prototype.slice.call(arguments));
    },
    warn: function () {
      con && con.warn && con.warn(Array.prototype.slice.call(arguments));
    },
    error: function () {
      con && con.error && con.error(Array.prototype.slice.call(arguments));
    }
  };


  var Validators = {
    email: new RegExp("[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?")
  };


  var Messages = {
    email: "Invalid email"
  };


  var FormValidator = function (formSelector) {
    // Get references to the form and it's inputs.
    var form = this.$form = $(formSelector);
    this.$inputs = form.find("input");

    // TODO: REMOVE ME
    this.$inputs.data("type", "email");
    this.$inputs.filter("#fname").data("type", "fkjgdff");

    return this.bindEvents();
  };


  /** 
  * Loops through form inputs and binds events
  *
  * @method bindEvents
  */
  FormValidator.prototype.bindEvents = function () {
    var self = this;

    // Loop through inputs and bind events.
    this.$inputs.each(function () {
      self.bindEventsForInput.call(self, $(this));
    });
    return this;
  };

  /**
  * Finds related validator and binds a validate event to an input
  *
  * @method bindEventsForInput
  * @param $input {jQuery Object} input to bind events on
  *
  */
  FormValidator.prototype.bindEventsForInput = function ($input) {
    // Find input type and related validator.
    var inputType = $input.data("type");

    // event(s) to trigger on - if nothing set, defaults to change.
    var trigger = $input.data("trigger") || "change";

    var validator;
    if (!Validators.hasOwnProperty(inputType)) {
      console.warn("No validator for", inputType);
      return this;
    }
    validator = Validators[inputType];

    // Bind events
    $input.on(trigger, {validator: validator}, $.proxy(this.triggerValidate, this));
    return this;
  };


  /**
  * Triggered when input should be validated, calls validate
  *
  * @method triggerValidate
  * @param evt {jQuery Event} jquery event object passed the relevant validator for this input type.
  *
  */
  FormValidator.prototype.triggerValidate = function (evt) {
    var validator = evt.data.validator;
    var $input = $(evt.target);

    this.validate($input, validator);
  };


  /**
  * Handles input validation and feedback
  *
  * @method validate
  * @param $input {jQuery Object} input to validate
  * @param validator {object accepted by validateValue function}
  *
  */
  FormValidator.prototype.validate = function ($input, validator) {
    var value = $input.val();

    var isValid = this.validateValue(validator, value);

    if (isValid) {
      console.log("woo");
    } else {
      console.log("noo");
    }
  }


  /**
  * Checks if an input value is valid
  *
  * @method validateValue
  * @param validation {RegExp} validation to test value against
  * @param value {String} value to validate
  *
  */
  FormValidator.prototype.validateValue = function (validation, value) {
    if (validation instanceof RegExp) {
      return validation.test(value);
    }

    console.error("unexpected validation format", validation);
    return false;
  };


  console.log(new FormValidator("#signup_form"));

})(window.jQuery);