Javascript - Strategy Pattern suggestion required.

Question

I have a Javascript form validator function something like

 switch (element.getAttribute('validationtype')) {

        case 'text':
            if (cic.visible(element)) {
                if (cic.getValue(element).strip() == "") {
                    errors.push(element.getAttribute('validationmsg'));
                    element.style.border = "1px solid #B23232";
                } else {
                    element.style.border = "1px solid #CAD5DE";
                }
            }
            break;

        case 'textarea': if (element.value.strip() == "") {
                errors.push(element.getAttribute('validationmsg'));
            }
            break;

        case 'email':
            if (!cic.isEmail(cic.getValue(element))) {
                errors.push(element.getAttribute('validationmsg'));
                element.style.border = "1px solid #B23232";
            } else {
                element.style.border = "1px solid #CAD5DE";
            };
            break;

        case 'numeric':
            if (cic.getValue(element).strip() == "" || isNaN(cic.getValue(element).replace(',', '.'))) {
                errors.push(element.getAttribute('validationmsg'));
                element.style.border = "1px solid #B23232";
            } else {
                element.style.border = "1px solid #CAD5DE";
            };
            break;

    }

Everytime I need a new validation type I have to change the function. What should be the best way to organize this function as a class, so that it is closed to change.

Answer 1

You need to find a way to encode each validation rule in some portable format, string or maybe JSON that is easy to generate automatically.

Then you need to change the function to parse these rules.

The format might be

{
    [
        {"fieldname":"something","validationtype":"minmax","arguments":{"min":10,"max":20}}
        , {"fieldname":"somethingelse","validationtype":"largerthanfield","arguments":{"field":""something}}
    ]
}

This would then test that field something is in the range of 10 to 20 and that something2 is larger than something.

Which rule options you should implement depends on your solution and there can be almost any numer of variants.

Answer 2

Instead of implementing this yourself, how about using jQuery Validation plug-in?

Answer 3

You need to find the common parts in validation and the type specific ones (Don't Repeat Yourself).

// Type Specific Validation  
var Validator = {
  "text": function (data) {
       // validate text
  },
  "email": function (data) {
       // validate email
  },
  // ...
}

Inside your function:

// Common Validation
var type = el.getAttribute('validationtype');
var isValid = Validator[type];

if ( cic.visible(el) ) { 
  if ( !isValid(el) ) {
    element.style.border = "1px solid #B23232";
    errors.push(element.getAttribute('validationmsg'));
  } else {
    element.style.border = "1px solid #CAD5DE";
  }
}