Return to Answer

/*
 * Here is your class which could be included from separate file
 */
function inputElementValidator(validators) {
 this.validators = $.extend(this.defaultValidators, validators);
};
// class method(s)
inputElementValidator.prototype = {
 validate: function (el, callback) {
 var $el = $(el);
 // get validation to be applied from element attribute
 var rule = $el.data('validation-rule');
 if(rule === 'undefined') {
 // there is no validation rule, so let's pass validation
 return callback(el, true);
 }
 // validator must return boolean
 if(rule in this.validators){
 // callback must support two arguments - the element and validation status
 return callback(el, this.validators[rule]);
 }
 throw new Error(
 'Unknown validation rule "' + rule + '" specified.'
 );
 }
};
// class "static" property
inputElementValidator.defaultValidators: {
 'not-null':
 value => { return value.length > 0; },
 'two-words':
 value => { return /^[A-Za-zÀ-ú]+ [A-Za-zÀ-ú]/.test(value); },
 'numb':
 value => { return /^(?=.*\d)\d*[\.,円]?\d*$/.test(value); },
 // etc.
};
/*
 * Here is your code in your page
 */
// first, set up validator with whatever rules above and beyond default
var inputValidator = new inputElementValidator({
 'new-or-overridden-validation-rule':
 value => { return /* something */; }
});
// create your validation callback function
// this is where you apply your logic to display validation success/failure
function validationCallback(el, success) {
 if(success) {
 // do something with el or $(el)
 } else {
 // do something else
 }
}
// attach event handling
$('.common_ancestor_selector').on(
 'keyup change focusout',
 '.target_element_selector',
 function() { inputValidator.validate(this, validationCallback); }
);
 

/*
 * Here is your class which could be included from separate file
 */
function inputElementValidator(validators) {
 this.validators = $.extend(this.defaultValidators, validators);
};
// class method(s)
inputElementValidator.prototype = {
 validate: function (el, callback) {
 var $el = $(el);
 // get validation to be applied from element attribute
 var rule = $el.data('validation-rule');
 if(rule === 'undefined') {
 // there is no validation rule, so let's pass validation
 return callback(el, true);
 }
 // validator must return boolean
 if(rule in this.validators){
 // callback must support two arguments - the element and validation status
 return callback(el, this.validators[rule]);
 }
 throw new Error(
 'Unknown validation rule "' + rule + '" specified.'
 );
 }
};
// class "static" property
inputElementValidator.defaultValidators: {
 'not-null':
 value => { return value.length > 0; },
 'two-words':
 value => { return /^[A-Za-zÀ-ú]+ [A-Za-zÀ-ú]/.test(value); },
 'numb':
 value => { return /^(?=.*\d)\d*[\.,円]?\d*$/.test(value); },
 // etc.
};
/*
 * Here is your code in your page
 */
// perhaps wrap in IIFE to make this self-contained scope
(function() {
 // first, set up validator with whatever rules above and beyond default
var inputValidator = new inputElementValidator({
 'new-or-overridden-validation-rule':
 value => { return /* something */; }
});

// create your validation callback function
// this is where you apply your logic to display validation success/failure
function validationCallback(el, success) {
 if(success) {
 // do something with el or $(el)
 } else {
 // do something else
 }
}

// attach event handling
$('.common_ancestor_selector').on(
 'keyup change focusout',
 '.target_element_selector',
 function() { inputValidator.validate(this, validationCallback); }
 );
})();

/*
 * Here is your class which could be included from separate file
 */
function inputElementValidator(validators) {
 this.validators = $.extend(this.defaultValidators, validators);
};
// class method(s)
inputElementValidator.prototype = {
 validate: function (el, callback) {
 var $el = $(el);
 // get validation to be applied from element attribute
 var rule = $el.data('validation-rule');
 if(rule === 'undefined') {
 // there is no validation rule, so let's pass validation
 return callback(el, true);
 }
 // validator must return boolean
 if(rule in this.validators){
 // callback must support two arguments - the element and validation status
 return callback(el, this.validators[rule]);
 }
 throw new Error(
 'Unknown validation rule "' + rule + '" specified.'
 );
 }
};
// class "static" property
inputElementValidator.defaultValidators: {
 'not-null':
 value => { return value.length > 0; },
 'two-words':
 value => { return /^[A-Za-zÀ-ú]+ [A-Za-zÀ-ú]/.test(value); },
 'numb':
 value => { return /^(?=.*\d)\d*[\.,円]?\d*$/.test(value); },
 // etc.
};
/*
 * Here is your code in your page
 */
// first, set up validator with whatever rules above and beyond default
var validator = new inputElementValidator({
 'new-or-overridden-validation-rule':
 value => { return /* something */; }
});
// create your validation callback function
function validationCallback(el, success) {
 if(success) {
 // do something with el or $(el)
 } else {
 // do something else
 }
}
// attach event handling
$('.common_ancestor_selector').on(
 'keyup change focusout',
 '.target_element_selector',
 function(){
  validator.validate(this, validationCallback); }
);
 

/*
 * Here is your class which could be included from separate file
 */
function inputElementValidator(validators) {
 this.validators = $.extend(this.defaultValidators, validators);
};
// class method(s)
inputElementValidator.prototype = {
 validate: function (el, callback) {
 var $el = $(el);
 // get validation to be applied from element attribute
 var rule = $el.data('validation-rule');
 if(rule === 'undefined') {
 // there is no validation rule, so let's pass validation
 return callback(el, true);
 }
 // validator must return boolean
 if(rule in this.validators){
 // callback must support two arguments - the element and validation status
 return callback(el, this.validators[rule]);
 }
 throw new Error(
 'Unknown validation rule "' + rule + '" specified.'
 );
 }
};
// class "static" property
inputElementValidator.defaultValidators: {
 'not-null':
 value => { return value.length > 0; },
 'two-words':
 value => { return /^[A-Za-zÀ-ú]+ [A-Za-zÀ-ú]/.test(value); },
 'numb':
 value => { return /^(?=.*\d)\d*[\.,円]?\d*$/.test(value); },
 // etc.
};
/*
 * Here is your code in your page
 */
// first, set up validator with whatever rules above and beyond default
var inputValidator = new inputElementValidator({
 'new-or-overridden-validation-rule':
 value => { return /* something */; }
});
// create your validation callback function
// this is where you apply your logic to display validation success/failure
function validationCallback(el, success) {
 if(success) {
 // do something with el or $(el)
 } else {
 // do something else
 }
}
// attach event handling
$('.common_ancestor_selector').on(
 'keyup change focusout',
 '.target_element_selector',
 function() { inputValidator.validate(this, validationCallback); }
);
 

function validateInput(el) {
 var $el = $(el);
 // My suggestion would be to set data properties on element
 // rather than classes to indicate validation enforcement.
 // This is easier than iterating through classes.
 var rule = $el.data('validation-rule');
 
 if(rule === 'undefined') {
 // there is no validation rule, so let's pass validation
 return true;
 }
 if(rule in validationFunctions){
 return validationFunctions[rule]( $el.val() );
 }
 throw new Error('Unknown validation rule "' + rule + '" specified.');
}

// set of validation functions
var validationFunctions = {
 'not-null':
 value => { return value.length > 0; },
 'two-words':
 value => { return value.match(/^[A-Za-zÀ-ú]+ [A-Za-zÀ-ú]+/i); },
 'numb':
 value => { return value.match(/^(?=.*\d)\d*[\.,円]?\d*$/); },
 // etc.
}

/*
 * Here is your class which could be included from separate file
 */
function inputElementValidator(validators) {
 this.validators = $.extend(this.defaultValidators, validators);
}
// class method(s)
inputElementValidator.prototype = {
 validate: function (el, callback) {
 var $el = $(el);
 // get validation to be applied from element attribute
 var rule = $el.data('validation-rule');
 if(rule === 'undefined') {
 // there is no validation rule, so let's pass validation
 return callback(el, true);
 }
 // validator must return boolean
 if(rule in this.validators){
 // callback must support two arguments - the element and validation status
 return callback(el, this.validators[rule]);
 }
 throw new Error(
 'Unknown validation rule "' + rule + '" specified.'
 );
 }
}
// class "static" property
inputElementValidator.defaultValidators: {
 'not-null':
 value => { return value.length > 0; },
 'two-words':
 value => { return /^[A-Za-zÀ-ú]+ [A-Za-zÀ-ú]/.test(value); },
 'numb':
 value => { return /^(?=.*\d)\d*[\.,円]?\d*$/.test(value); },
 // etc.
}
}
/*
 * Here is your code in your page
 */
// first, set up validator with whatever rules above and beyond default
var validator = new inputElementValidator({
 'new-or-overridden-validation-rule':
 value => { return // something; },
  }
);
// create your validation callback function
function validationCallback(el, success) {
 if(success) {
 // do something with el or $(el)
 } else {
 // do something else
 }
}
// attach event handling
$('.common_ancestor_selector').on(
 'keyup change focusout',
 '.target_element_selector',
 function(){
 validator.validate(this, validationCallback);
 }
);
 

function validateInput(el) {
 var $el = $(el);
 // My suggestion would be to set data properties on element
 // rather than classes to indicate validation enforcement.
 // This is easier than iterating through classes.
 var rule = $el.data('validation-rule');
 
 if(rule === 'undefined') {
 // there is no validation rule, so let's pass validation
 return true;
 }
 if(rule in validationFunctions){
 return validationFunctions[rule]( $el.val() );
 }
 throw new Error('Unknown validation rule "' + rule + '" specified.');
};

// set of validation functions
var validationFunctions = {
 'not-null':
 value => { return value.length > 0; },
 'two-words':
 value => { return value.match(/^[A-Za-zÀ-ú]+ [A-Za-zÀ-ú]+/i); },
 'numb':
 value => { return value.match(/^(?=.*\d)\d*[\.,円]?\d*$/); },
 // etc.
};

/*
 * Here is your class which could be included from separate file
 */
function inputElementValidator(validators) {
 this.validators = $.extend(this.defaultValidators, validators);
};
// class method(s)
inputElementValidator.prototype = {
 validate: function (el, callback) {
 var $el = $(el);
 // get validation to be applied from element attribute
 var rule = $el.data('validation-rule');
 if(rule === 'undefined') {
 // there is no validation rule, so let's pass validation
 return callback(el, true);
 }
 // validator must return boolean
 if(rule in this.validators){
 // callback must support two arguments - the element and validation status
 return callback(el, this.validators[rule]);
 }
 throw new Error(
 'Unknown validation rule "' + rule + '" specified.'
 );
 }
};
// class "static" property
inputElementValidator.defaultValidators: {
 'not-null':
 value => { return value.length > 0; },
 'two-words':
 value => { return /^[A-Za-zÀ-ú]+ [A-Za-zÀ-ú]/.test(value); },
 'numb':
 value => { return /^(?=.*\d)\d*[\.,円]?\d*$/.test(value); },
 // etc.
};
/*
 * Here is your code in your page
 */
// first, set up validator with whatever rules above and beyond default
var validator = new inputElementValidator({
 'new-or-overridden-validation-rule':
 value => { return /* something */; }
});
// create your validation callback function
function validationCallback(el, success) {
 if(success) {
 // do something with el or $(el)
 } else {
 // do something else
 }
}
// attach event handling
$('.common_ancestor_selector').on(
 'keyup change focusout',
 '.target_element_selector',
 function(){
 validator.validate(this, validationCallback);
 }
);