在验证器返回Invalid后,如何防止jquery在叠加层上中断?

时间:2016-10-27 16:06:25

标签: jquery plone

我正在使用Plone 4.3,我有一个带有验证器(z3c.form.validator.SimpleValidator)的表单,当不满足某个字段的条件时,该表单会引发Invalid。但是,在用户点击“提交”的情况下使用无效数据并将表单作为叠加层打开时,将显示“无效”消息,但我使用jQuery进行的任何更改都将恢复。

我有一个函数,当调用时用00和30替换开始和结束字段中的分钟(从IEventBasic行为实现):

jquery(function($){
    $.fn.extend({
        modifyTEWidgets: function(){
            $('#form-widgets-IEventBasic-start-minute').replaceWith(
                '<select class="minute datetime-widget required datetime-field" id="form-widgets-IEventBasic-start-minute" name="form.widgets.IEventBasic.start-minute">\
                     <option value="00">00</option>\
                     <option value="30">30</option>\
                </select>'
            );

            $('#form-widgets-IEventBasic-end-minute').replaceWith(
                '<select class="minute datetime-widget required datetime-field" id="form-widgets-IEventBasic-end-minute" name="form.widgets.IEventBasic.end-minute">\
                     <option value="00">00</option>\
                     <option value="30">30</option>\
                 </select>'
             );                
        },
    });


});

在prep overlay的配置参数中,我设置了onLoad选项来调用modifyTEWidgets()

$('a#my-object-myobject, .openMyObject').prepOverlay({
        subtype: 'ajax',
        filter: '#content>*',
        formselector: '#content-core > form',
        noform: 'redirect',
        config:{
                onLoad: function(e){
                        $().modifyTEWidgets();
                },

        }
});

当表单未作为弹出窗口访问时,我也会进行相同的更改:

jQuery(document).ready(function(){
    if($('body').hasClass('portaltype-my-object-myobject') || $('body').hasClass('template-my-object-myobject')){
        $().modifyTEWidgets();
    }
    ...
});

问题是当表单作为叠加层访问时,当用户单击带有无效日期的提交按钮时,jQuery会中断。分钟恢复到0-59,如果选择整天,则开始和结束字段的隐藏时间组件的另一个更改将停止工作。 奇怪的是,如果用户在离开无效日期后点击另一个字段,而不是单击“提交”,则它不会中断,并且“无效”消息会显示为应该显示的状态。此外,如果用户正常访问表单,jQuery根本不会中断。

我确实尝试使用config参数中的其他选项来调用modifyTEWidgets,但我不确定这是否会在没有任何变化的情况下提供帮助。部分问题可能是起始和结束字段来自IEventBasic。

当用户点击带有无效数据的提交时,有没有办法阻止字段中所做的更改被撤消?

UPDATE 我最终想出了一个工作。

$('#form-buttons-save').click(function(e){

    if(typeof clicked !== 'undefined'){
        //prevent submitting again
        e.preventDefault();
    }
    else{
        $('.fieldErrorBox').each(function(i,obj){
            if(obj.innerHTML.length > 0){
                //prevent submitting and break loop
                e.preventDefault();
                clicked = undefined;
                return false;
            }
            //Set clicked to true since there could be a potential submission
            clicked = true;
        });
    }
    //Upon reaching this line, the submission will occur
});

我需要做的另一件事就是在验证器中自行检查是否在开始日期之前设置了结束日期。它们默认发生在点击提交后,在我的情况下会破坏jQuery的更改。

0 个答案:

没有答案