Simple Validator

08/26/2014, Tue

Categories: #JavaScript

Simply Validating

Validation conjures up thoughts of input form validation, but validation could also pop up elsewhere when there is user input such as the case for parameters in jQuery plugins.

The following article will describe a build-up of a modular validate function.

The validation will perform as follows

// Format and Example

// validate(inputData, attr, attrRule, againstValue);
ex: validate(10, number, greaterThan, 11);

The example function will determine whether 10 as a number is greater than 11, which turns out to be false. The output of validate will be a string that states the error.

We start off with the validate variable as an immediately-invoking function with the variables that are to be accepted in the validate function

// Variables Accepted

var validate = function () {
  var inputData, againstValue, attr, attrRule;
};

The validate function will have the blocks within

// General Function Layout

var validate = function () {
  var inputData, againstValue, attr, attrRule;

  // Validation Messages
  var validationMessage = {};

  // Validation Definitions
  var validationDefinitions = {};

  // Run Check
  var validationCheck = function () {};

  // Input Gather
  return function () {};
};

Accept Variables Input

The 'Input Gather' function will expose the arguments to the variables that are open within the validate function. The main comparison is done with the validationDefinition function, before its boolean outcome is handed off and checked by validationCheck.

// Input Gather

// Start off the validation
return function () {
  var args = arguments;
  attr = args[1];
  attrRule = args[2];
  inputData = args[0];
  againstValue = args[3];

  // Kicks off the validation check with supplied data
  return validationCheck(validationDefinitions[attr][attrRule]());
};

Validation Rules

The validationDefinitions variable is an object that has a mapping of attr: {attrRule: function(){}}. The actual validation process is done by calling upon the attrRule definition function.

// Validation Definitions

// Validation patterns
// Passed-in data are compared against the desired value (againstValue)
var validationDefinitions = {
  number: {
    greaterThan: function () {
      return inputData > againstValue;
    },
  },
};

Determining Validness

The result of the validation helps determine if a validation message needs to be sent

// Validation Check

// Run the checks against the validation patterns
var validationCheck = function (passedCheck) {
  // Only generate a message value was not validated
  if (!passedCheck) {
    return validationMessage[attr][attrRule]();
  }
};

Noting the Validation Error

The output of an invalid data input will result in a message being return.

// Validation Messages

// Determine which message type should be used
var validationMessage = {
  number: {
    // Generate the message for a specific attrRule
    greaterThan: function () {
      return inputData + " is not greater than " + againstValue;
    },
  },
};

All Together

The validate function is complete on the bottom. More validation definitions and messages be added in the proper blocks.

// Complete Validation Function

var validate = (function () {
  // Make these variables accessible to all functions inside validator
  var inputData, againstValue, attr, attrRule;

  // Determine which message type should be used
  var validationMessage = {
    number: {
      // Generate the message for a specific attrRule
      greaterThan: function () {
        return inputData + " is not greater than " + againstValue;
      },
      /*
      lessThan: function() {
        return inputData + ' is not less than ' + againstValue;
      }

      // More messages here
      */
    },
  };

  // Validation patterns
  // Passed-in data are compared against the desired value (againstValue)
  var validationDefinitions = {
    number: {
      greaterThan: function () {
        return inputData > againstValue;
      },
      /*
      ,lessThan: function() {
        return inputData < againstValue;
      }
      // More rules here
      */
    },
  };

  // Run the checks against the validation patterns
  var validationCheck = function (passedCheck) {
    // Only generate a message value when not validated
    if (!passedCheck) {
      return validationMessage[attr][attrRule]();
    }
  };

  // Start off the validation
  return function () {
    var args = arguments;
    attr = args[1];
    attrRule = args[2];
    inputData = args[0];
    againstValue = args[3];

    // Kicks off the validation check with supplied data
    return validationCheck(validationDefinitions[attr][attrRule]());
  };
})();

// Usage: validate(inputData, 'number', 'greaterThan', 5);
console.log(validate(4, "number", "greaterThan", 5));
// Output: '4 is not greater than 5'

Online Demo

WH