Multiple similar event handlers for input validation I want to reduce my repetitive code used to validate inputs values. For that I'm using:


a class associated to the input
a condition to validate the input value
an event handler


First I declare the classes I'm using:

var inputNotNull = '.js-mandatory-notnull',
    input2Words = '.js-mandatory-2words',
    inputNumb = '.js-mandatory-numb';


Then I create an event handler for each class and each of them has the same pattern: Call the function validateInput(event, thisInput, itsCondition)

$(document).on('keyup change focusout', inputNotNull, function(e){
    var $xthis = $(this),
        condition = $xthis.val().length&gt;0;
    validateInput(e, $xthis, condition); //treats the visual part of the input
});


$(document).on('keyup change focusout', input2Words, function(e){
    var $xthis = $(this),
        condition = $xthis.val().match(/^[A-Za-zÀ-ú]+ [A-Za-zÀ-ú]+/i);
    validateInput(e, $xthis, condition);
});

$(document).on('keyup change focusout', inputNumb, function(e){
    var $xthis = $(this),
        condition = this.value.match(/^(?=.*\d)\d*[\.\,]?\d*$/);
    validateInput(e, $xthis, condition);
});


I was wondering how I could reduce this code. In this example I only show 3 classes, but on my code I have >20 classes. Is it possible to do something similar to "key:value" ("input:condition") and I would end up writing something like this:

var validations = {
    '.js-mandatory-notnull' : length &gt; 0,
    '.js-mandatory-2words' : match(/^[A-Za-zÀ-ú]+ [A-Za-zÀ-ú]+/i),
    '.js-mandatory-numb' : match(/^(?=.*\d)\d*[\.\,]?\d*$/),
}


And then somehow treat this object to reproduce what I wrote before.

In this example I'm talking about validations, but I would like to apply this knowledge into another repetitive code scenarios.
You can use functions for those validations:

var validations = {
    '.js-mandatory-notnull': function(val) {
        return val.length &gt; 0;
    },
    '.js-mandatory-2words': function(val) {
        return val.match(/^[A-Za-zÀ-ú]+ [A-Za-zÀ-ú]+/i);
    },
    '.js-mandatory-numb': function(val) {
        return val.match(/^(?=.*\d)\d*[\.\,]?\d*$/);
    }
}


And then install those via a loop:

$.each(validations, function(selector, validate) {
    $(document).on('keyup change focusout', selector, function(e){
        validateInput(e, $(this), validate(this.value));
    });
});