Foundation Abide：自定义 patterns/validations 不在模糊时触发

Question

我是基础遵守验证的新手。到目前为止，我一直在使用 abide 中定义的模式和验证。 onblur 事件被触发并且错误消息被正确显示。今天，我定义了自己的模式和验证

$(document).foundation({
abide: {
    validate_on: 'manual',
    patterns: {
        positive_numbers_only: /^\d+$/,
        telephone_number: /(?:\(\d{3}\)|\d{3})[- ]?\d{3}[- ]?\d{4}/,
        alphanumeric_spaces: /^[\w\s]+$/
    },
    validators: {
        checkbox_limit: function (el, required, parent) {
            "use strict";
            var group = parent.closest('.checkbox-group');
            var min = group.attr('data-abide-validator-min');
            var checked = group.find(':checked').length;
            if (checked == min) {
                group.find('small.error').hide();
                return true;
            } else {
                group.find('small.error').css({
                    display: 'block'
                });
                return false;
            }
        }
    }
}

});

验证在单击提交按钮时正确触发，但在模糊时不正确。我假设 onblur 事件没有因为自定义验证而被触发。

注意：我使用了两个按钮并创建了一个影子提交按钮。单击按钮时，我触发了影子提交按钮的单击事件。

提前致谢。

Answer 1

我找到了解决方案here

我遇到的问题是，onblur 对我不起作用，因为我在不同的 div 中有复选框。检查这个 -

<div class="row collapse">
     <div class="small-16 columns">
          <div class="row collapse">
               <div class="small-16 columns">Do you agree to our terms & conditions?</div>
               </div>
               <div class="row collapse checkbox-group" data-abide-validator-min="1">
                    <div class="small-3 columns">
                         <label for="cbYes">
                                <input type="checkbox" id="cbYes" value="Yes" data-abide-validator="checkbox_limit" />Yes
                         </label>
                    </div>
                    <div class="small-3 columns end">
                        <label for="cbNo">
                              <input type="checkbox" id="cbNo" value="No" data-abide-validator="checkbox_limit" />No
                        </label>
                        <small class="error">Please agree to our terms & conditions.</small>
                    </div>
               </div>
          </div>
    </div>
</div>

我创建了一个 fiddle。 Check out

所以为了克服模糊问题，我修改了 foundation.abide.js 文件。

我提供了评论，以便任何人都能理解我在哪里进行了更改。

希望对您有所帮助。

从here

以最简单的方式了解更多关于 Foundation Abide 的信息

Foundation Abide：自定义 patterns/validations 不在模糊时触发

Foundation Abide : Custom defined patterns/validations not firing on blur

javascript

css

validation

jquery

zurb-foundation