【问题标题】:prevent validation while the datepicker has focus在日期选择器有焦点时阻止验证
【发布时间】:2012-11-02 12:45:52
【问题描述】:

我正在使用 jQuery-ui datepicker 和 Jörn Zaefferer 的 validate 插件。

众所周知,在日期选择器更改输入字段的内容之后 validate 不会自动触发。

我觉得好奇的是,当点击年份下拉菜单、点击月份下拉菜单和点击日期时,validate 会触发。而且,在这些情况下,输入字段的值都没有改变。您可以在这里亲自尝试:http://jsfiddle.net/ECku3/12/ 有 console.log 事件显示何时调用验证方法以及调用 $.validator.showErrors() 时验证字段的值。

tl;博士

我想找到一种在日期选择器有焦点时防止验证的方法。但是当用户键入日期而不是使用日期选择器时,我不想阻止验证。所以我不能只设置$.validator.settings.onfocusout = false。

想法?

【问题讨论】:

    标签: jquery jquery-validate jquery-ui-datepicker


    【解决方案1】:

    我已经像这样使用了jquery.ui.datepicker.validation.js 插件:

    $(document).ready(function() {
        $.datepicker.setDefaults({
            dateFormat: 'yy-mm-dd',
            firstDay: 1,
            showOn: 'button',
            changeMonth: true,
            changeYear: true,
    
        });
    
        $("#mydate").datepicker();
        $('#myform').validate({ 
            errorPlacement: $.datepicker.errorPlacement, 
            rules: { 
                mydate: { 
                    required: true, 
                    dpDate: function(){traceBack(); return true;},
                    dpCompareDate: 'notBefore 2011-01-01' 
                } 
            }, 
            messages: { 
                mydate: 'Please enter a valid date (yyyy-mm-dd) after 2011-01-01'
            }});
    
        function traceBack() {
            console.log("Firing?");
        }
    });​
    

    编辑

    如果您真的不希望在 datepicker 小部件中导航时触发任何验证事件,您可以在 datepicker 小部件可见时关闭 onfocusout 设置:

    $(document).ready(function() {
        $.datepicker.setDefaults({
            dateFormat: 'yy-mm-dd',
            firstDay: 1,
            showOn: 'button',
            changeMonth: true,
            changeYear: true,
            beforeShow: function () {$("#myform").validate().settings.onfocusout = false; },
            onClose: function () {$("#myform").validate().settings.onfocusout = true;}
        });
    
        $("#mydate").datepicker();
        $('#myform').validate({ 
            errorPlacement: $.datepicker.errorPlacement, 
            rules: { 
                mydate: { 
                    required: true, 
                    dpDate: function(){traceBack(); return true;},
                    dpCompareDate: 'notBefore 2011-01-01' 
                } 
            }, 
            messages: { 
                mydate: 'Please enter a valid date (yyyy-mm-dd) after 2011-01-01'
            }});
    
        function traceBack() {
            console.log("Firing?");
        }
    
    });​
    

    看到这个小提琴:http://jsfiddle.net/mccannf/Bn7gy/24/

    【讨论】:

    • datepicker.validation 是一个不错的插件。但这并没有解决我正在谈论的问题。我在您的小提琴中添加了一个 console.log() 以显示验证何时触发(jsfiddle.net/Bn7gy/4)。当场失去焦点时,它会适当地触发。当您从日期选择器中选择一年、一个月和一天时,它会无缘无故地触发一次(因为日期实际上还没有改变)。然后在完全选择日期后适当地触发。
    • 不幸的是,关闭onfocusout 意味着当用户输入日期时不再进行验证。正如我在我的 OP 中指出的那样,这不是我的选择。
    • validateDelegate 是做什么的?据我所知,关闭事件应该意味着它不需要被覆盖。但是我的 javascript 比我想要的要弱,所以非常欢迎对原始函数进行很好的解释。
    • 请忽略 validateDelegate 部分 - 它是小提琴中的错误版本,它没有做任何事情。上面编辑的答案 - 这是我可以验证按键并避免在导航日期选择器时触发验证事件的唯一方法。
    • 完美!我一直试图让验证者这样做。但是让日期选择器控制它更有意义。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2023-03-17
    • 2017-02-25
    • 1970-01-01
    • 1970-01-01
    • 2015-01-29
    相关资源
    最近更新 更多