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 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";
  }
}