Question

So right now I have an input validation method structured something like this:

function validate(element, regex);

‘element’ is the input DOM element and ‘regex’ is the regular expression that the method checks the user’s input against. If the input doesn’t matchup with regex, the input element outline changes to red. If the user input is valid, then the outline changes back to black.

Is there a way to associate this function with a CSS class so that every element with that class will automatically call that function?

<input type="text" id="text_field" class="yearvalidate"/>

So class “yearvalidate” would send a regular expression to validate() that limits the input to 4 digits. And this would be done automatically instead of explicitly writing Javascript to call validate for the textfield.

Is there a way to do this or do I have to make an explicit call in Javascript?

Answer 1

With jQuery:

$('input').each(function(i,e) {
  var regex = getRegex($(e).attr('class'));
  if (regex) validate(e, regex);
});

You’ll have to create another function getRegex() for turning ‘yearvalidate’ into /\d{4}/ though.

function getRegex(classname) {
   switch(classname) {
      case 'numbervalidate':
        return /\d+/;
        break;
      case 'yearvalidate':
        return /\d{4}/;
        break;
   }
}