【问题标题】:jQuery validation engine - How to safely re-validate form with changed class attribute on inputs?jQuery 验证引擎 - 如何使用更改的输入类属性安全地重新验证表单?
【发布时间】:2014-05-12 18:25:03
【问题描述】:

我正在使用验证引擎进行一些测试,我发现消息呈现错误(在页面的角落),所以......当您动态更改类属性时是否可以正确呈现消息jQuery?像重新验证表格? (改变了输入的类属性)

更新:我尝试使用'validate' 操作,但它是同一件事。我在这里使用 3 个表,每个表有 4 个复选框。因此,在下拉列表更改时,我切换表(选择选项时,出现一个表(从输入和 display:none 中删除 disabled)和其他 2 个表(将 disabled 放入输入并将 display:none 放入表)。复选框名称使用 Thymeleaf 预处理表达式呈现,所以我认为可能是这样。我创建了 minCheckbox 的替代版本,它使用 alt 属性而不是名称,但无济于事。效果很好,但错误仍然存​​在。使表格出现和消失的动作是问题,但我不知道如何解决它。

更新 #2: 好的,我首先为保存按钮设置了这个点击事件:

    $('input[name="input_save"]').click(function() {
        if(flag == false){
             $("#frmUsuarioCrear").validationEngine();
             flag = true;
         }

        if(flag2 == true)
        {
            $("#frmUsuarioCrear").validationEngine('attach');
            flag2 = false;
        }
    });

    $("#frmUsuarioCrear").bind("jqv.form.result", function(event, errorFound) {
            if(errorFound)
                alert("Hay algunos problemas con sus datos. Revise y vuelva a intentar.");
    });

我还为表单设置了绑定。该标志用于仅在分离时重新激活引擎。所以,在下拉列表的 change 事件中:

    $('#ddlModulo').change(function(){
        var val = this.value;

        if(val == "ADQUIRIENTE")
        {
            $('#modulo_1').find("input").removeAttr("disabled");
            $('#modulo_2').find("input").attr("disabled", "disabled");
            $('#modulo_3').find("input").attr("disabled", "disabled");
            $('#modulo_1').removeAttr("style");    
            $('#modulo_2').css("display", "none");
            $('#modulo_3').css("display", "none");
            $("#main tr:nth-child(6)").hide();
            $("#main tr:nth-child(6)").find("select").attr("disabled", "disabled");

            $("#main tr:nth-child(7)").hide();
            $("#main tr:nth-child(7)").find("select").attr("disabled", "disabled");

            $('#modulo_1').find("input:first").attr("class", "validate[funcCall[checkHooks]]");
            $('#modulo_2').find("input:first").removeAttr("class");
            $('#modulo_3').find("input:first").removeAttr("class");
        }
        else if(val == "COMERCIO")
        {
            $('#modulo_1').find("input").attr("disabled", "disabled");
            $('#modulo_2').find("input").removeAttr("disabled");
            $('#modulo_3').find("input").attr("disabled", "disabled");
            $('#modulo_1').css("display", "none");
            $('#modulo_2').removeAttr("style");    
            $('#modulo_3').css("display", "none");

            $("#main tr:nth-child(6)").show();
            $("#main tr:nth-child(6)").find("select").removeAttr("disabled");

            $("#main tr:nth-child(7)").hide();
            $("#main tr:nth-child(7)").find("select").attr("disabled", "disabled");

            $('#modulo_1').find("input:first").removeAttr("class");
            $('#modulo_2').find("input:first").attr("class", "validate[funcCall[checkHooks]]");
            $('#modulo_3').find("input:first").removeAttr("class");
        }
        else if(val == "EMISOR")
        {
            $('#modulo_1').find("input").attr("disabled", "disabled");
            $('#modulo_2').find("input").attr("disabled", "disabled");
            $('#modulo_3').find("input").removeAttr("disabled");
            $('#modulo_1').css("display", "none");
            $('#modulo_2').css("display", "none");  
            $('#modulo_3').removeAttr("style");     

            $("#main tr:nth-child(6)").hide();
            $("#main tr:nth-child(6)").find("select").attr("disabled", "disabled"); 

            $("#main tr:nth-child(7)").show();
            $("#main tr:nth-child(7)").find("select").removeAttr("disabled");

            $('#modulo_1').find("input:first").removeAttr("class");
            $('#modulo_2').find("input:first").removeAttr("class");
            $('#modulo_3').find("input:first").attr("class", "validate[funcCall[checkHooks]]");
        }
        else
        {
            $('#modulo_1').find("input").attr("disabled", "disabled");
            $('#modulo_2').find("input").attr("disabled", "disabled");
            $('#modulo_3').find("input").attr("disabled", "disabled");
            $('#modulo_1').css("display", "none");
            $('#modulo_2').css("display", "none");
            $('#modulo_3').css("display", "none");

            $("#main tr:nth-child(6)").hide();
            $("#main tr:nth-child(6)").find("select").attr("disabled", "disabled"); 

            $("#main tr:nth-child(7)").hide();
            $("#main tr:nth-child(7)").find("select").attr("disabled", "disabled"); 

            $('#modulo_1').find("input:first").removeAttr("class");
            $('#modulo_2').find("input:first").removeAttr("class");
            $('#modulo_3').find("input:first").removeAttr("class");
        }

        if(flag == true){
            $("#frmUsuarioCrear").validationEngine('detach');
            flag2 = true;
        }            

    });

我这样做了,但提示没有呈现在它应该呈现的位置。 BTW,在选择下拉目的选项时,我将添加类进行右表的每个第一个输入时的验证。这可确保提示仅出现在第一个复选框中。 (我正在使用一个函数,因为在所选选项上的更改事件从其相应的表中获取所有复选框并查看如果没有返回警报。换句话说,验证引擎的Funccall。

function checkHooks(field, rules, i, options)
{

    var val = $('#ddlModulo').val();

        if(val == "ADQUIRIENTE")
        {
            var inputs =  $('#modulo_1').find("input[type='checkbox']:checked");

            if(inputs.length == 0){
                return options.allrules.checkHooks.alertText;
            }
        }
        else if(val == "COMERCIO")
        {
            var inputs =  $('#modulo_2').find("input[type='checkbox']:checked");

            if(inputs.length == 0){
                return options.allrules.checkHooks.alertText;
            }
        }
        else if(val == "EMISOR")
        {
            var inputs =  $('#modulo_3').find("input[type='checkbox']:checked");

            if(inputs.length == 0){
                return options.allrules.checkHooks.alertText;
            }
        }        

更新#3:我稍微修改了这段代码。我在提交点击事件中添加了第二个条件,它检查第二个标志。如果为真,它将附加验证引擎。这将是错误的。在下拉列表更改事件中,我根据第一个标志设置了类似的条件,只是它在更改时分离引擎并将第二个标志设置为真(因此它将在提交时进入条件,并重新附加引擎)

【问题讨论】:

    标签: jquery jquery-validation-engine


    【解决方案1】:

    你试过了吗:

    $("#Form-ID").validationEngine('validate');
    

    【讨论】:

    • 已经试过了。没用。我认为这与提示本身的呈现有关。我在更新中添加了更多信息。
    • 在启用/显示其他字段后,尝试将引擎重新附加到更改中的表单。因为当引擎初始化时,它会在表单内部构建元素数组来进行验证。
    • 我试过这个但没有用。以防万一,我把提交按钮的点击事件、下拉菜单的更改事件以及我用于funcCall验证器的函数的代码。
    • 您正在分离 $('#ddlModulo').change() 中的引擎,并且在单击提交之前永远不会重新附加它。另外,附加代码应为$("#frmUsuarioCrear").validationEngine('attach');
    • 好的,我按照你说的做了(阅读更新#3)。但显然同样的事情发生了。您说它在引擎初始化时构建数组,但附加和初始化是两个独立的操作。你确定分离和连接是这样工作的吗? =S
    猜你喜欢
    • 1970-01-01
    • 2013-05-15
    • 1970-01-01
    • 2023-04-03
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2019-08-29
    • 1970-01-01
    相关资源
    最近更新 更多