基础遵守:自定义模式/验证不会触发模糊

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

本文关键字：验证 模糊 模式 自定义      更新时间：2023-09-26

我是新来的基金会遵守验证。到目前为止，我一直在使用模式&定义的验证。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事件没有被触发。

注意:我使用了两个按钮&已经创建了一个影子提交按钮。在点击按钮时，我触发了影子提交按钮的点击事件。

我在这里找到了解决方案

我面临的问题是，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>

我创造了一个小提琴。查看

所以为了克服onblur问题，我修改了foundation. ide.js文件。

我提供了注释，这样任何人都可以理解我在哪里做了更改。

希望有帮助。

从这里以最简单的方式了解更多关于Foundation恪守

相关文章：