javascript - My JQuery validation plugin behaves strangely with checkbox inputs -

i wrote own general use validation plugin(s) take function check if input valid , callback each of cases input determined valid , invalid first function.

basically, plugin consists of 2 functions, '$.fn.validation()' bind object containing validation logic , success/failure callbacks element , '$.fn.validate()' either invoke validation object, or if new object passed in use new object 1 instance. implementation of plugins , a jsfiddle demonstrating issues described below can found here.

my issue while text input , texareas seem work in cases, depending on how elements, such checkbox inputs, selected, elements may not validated despite being in set of elements returned jquery element

for example, following selector not result in check boxes being validated

$('input, textarea').validate(); 

however more specific selector result in checkboxes being validated

$('input[type=checkbox]').validate(); 

again, please checkout jsfiddle have replicated issue

the problem you're extracting validation options outside this.each() loop in .validate() code:

  $.fn.validate = function(options){      var validation = $.extend({       check: $(this).data("check") || function(input){ return true },       success: $(this).data("success") || function (input){},       failure: $(this).data("failure") || function (input){}     }, options);      var valid = true;      this.each(function(){       if(validation.check($(this))){         validation.success($(this));       } else {         validation.failure($(this));         valid = false;       }     });      return valid;   }; 

when set validation, you're grabbing validation configuration first element in selected list, , what's used elements.

instead, code should inside this.each() callback:

$.fn.validate = function (options) {       var valid = true;      this.each(function () {         var validation = $.extend({             check: $(this).data("check") || function (input) {                 return true             },             success: $(this).data("success") || function (input) {},             failure: $(this).data("failure") || function (input) {}         }, options);         if (validation.check($(this))) {             validation.success($(this));         } else {             validation.failure($(this));             valid = false;         }     });      return valid; }; 

it worked when did input[type=checkbox] separately because validation configuration 1 checkbox (the element selected selector).