我的 JQuery 验证插件在复选框输入时表现异常

Posted 2023-05-09

【中文标题】我的 JQuery 验证插件在复选框输入时表现异常

【英文标题】：My JQuery validation plugin behaves strangely with checkbox inputs

【发布时间】：2015-11-24 22:39:41

【问题描述】：

我编写了自己的通用验证插件，该插件采用一个函数来检查输入是否有效，然后针对第一个函数确定输入有效和无效的每种情况进行回调。

基本上，该插件由两个函数组成，“$.fn.validation()”将包含验证逻辑和成功/失败回调的对象绑定到元素，然后“$.fn.validate()”可以调用验证对象，或者如果传入了一个新对象，它将使用这个新对象作为这个实例。下面描述的插件和a jsfiddle demonstrating the issues 的实现可以在这里找到。

我的问题是，虽然文本输入和 texareas 似乎在所有情况下都工作得很好，但取决于某些元素（例如复选框输入）的选择方式，尽管元素在返回的元素集中，但可能无法验证jQuery 元素

例如，以下选择器不会导致复选框被验证

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

但是，更具体的选择器将导致复选框被验证

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

再次，please checkout the jsfiddle 我复制了这个问题

【问题讨论】：

到底是什么问题？当我运行小提琴并单击“提交表单”而不选中复选框时，它会变成红色。

抱歉，$('input[type=checkbox]').validate();第 89 行应该被注释掉。我一定是在分享链接之前忘记保存了

【参考方案1】：

问题是您在.validate() 代码中的this.each() 循环之外 提取验证选项：

  $.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;
  ;

当您设置validation 时，您将获取所选列表中第一个元素的验证配置，这将用于所有元素。

相反，该代码应该在this.each() 回调中：

$.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;
;

当您单独执行input[type=checkbox] 时它会起作用，因为验证配置将是复选框（该选择器选择的唯一元素）的配置。

【讨论】：

10/10 好先生。有点尴尬，我自己没有意识到这一点。非常感谢您的及时回复。

@user2422529 这是一个有趣的错误 :)