Question

我有一个用于个人信息的多标签用户界面。该表单封装了整个＆＃34; tabset＆＃34;

最初，我使用的是v2.2，它没有validateNonVisibleFields标志我现在已升级到2.6.2以利用此功能。

我做了一个＆＃34;假的＆＃34;包含所有字段作为隐藏输入的表单，然后为每个选项卡创建一个表单。然后我处理提交以收集每个表单中的所有数据以放入虚拟表单并提交它。

源代码太长了，无法发布到此处，但我在这里建立了一个小提琴：http://jsfiddle.net/Mrbaseball34/22u28vcj/

（“地址”选项卡包含无效字段，需要填写家庭住址的国家/地区和状态，并且需要选择其中一个“邮件首选项”）

虽然我的代码有点工作，但经过一些初步测试后，似乎提示被放置在错误的位置，然后表单不会默认滚动到该字段。

我在切换标签后添加了1秒的延迟，但它仍处于错误的位置且没有滚动。

if(!$("#tab1_form").validationEngine("validate", {validateNonVisibleFields: true})) {
    setCurrentTab(0);
    sleep(1000);
    $("#tab1_form").validationEngine("validate", {validateNonVisibleFields: true});
    submit = false;
} else if(!$("#tab2_form").validationEngine("validate",{validateNonVisibleFields: true})) {
    setCurrentTab(1);
    sleep(1000);
    $("#tab2_form").validationEngine("validate", {validateNonVisibleFields: true});
    submit = false;
} else if(!$("#tab3_form").validationEngine("validate", {validateNonVisibleFields: true,
    updatePromptsPosition:true})) {
    sleep(1000);
    setCurrentTab(2);
    $("#tab3_form").validationEngine("validate", {validateNonVisibleFields: true});
    submit = false;
}

有什么想法吗？

Answer 1

此代码仅调用一次验证，并且似乎产生了所需的结果。

    for (i = 1; i <= 3; i++) {
        setCurrentTab(i - 1);
        var formId = "#tab" + i + "_form";
        $(formId).removeClass('validating');
        $(formId).validationEngine("validate", {
            scroll: true,
            promptPosition: "topRight",
            showArrow: true,
            showArrowOnRadioAndCheckbox: true
        })  
    }

在他们的演示（one example here）中，他们似乎重新连接了验证引擎：

jQuery('#formID').validationEngine('hide');
jQuery("#formID").validationEngine('detach');
jQuery("#formID").validationEngine('attach');

Answer 2

您需要使用sleep的Javascript中不存在setTimeout方法！

编辑：这不能解决问题，但这是处理睡眠功能的更常用方法。

替换：

 sleep(1000);

通过：

 setTimeout(function () {
        // Your code !
    }, 1000);

您的代码变为：

if (!$("#tab1_form").validationEngine("validate", { validateNonVisibleFields: true })) {
    setCurrentTab(0);
    setTimeout(function () {
        $("#tab1_form").removeClass('validating');
        $("#tab1_form").validationEngine("validate", { validateNonVisibleFields: true });
    }, 1000);
    submit = false;
} else if (!$("#tab2_form").validationEngine("validate", { validateNonVisibleFields: true })) {
    setCurrentTab(1);
    setTimeout(function () {
        $("#tab2_form").removeClass('validating');
        $("#tab2_form").validationEngine("validate", { validateNonVisibleFields: true });
    }, 1000);
    submit = false;
} else if (!$("#tab3_form").validationEngine("validate", { validateNonVisibleFields: true })) {
    setCurrentTab(2);
    setTimeout(function () { 
        $("#tab3_form").removeClass('validating');
        $("#tab3_form").validationEngine("validate", { validateNonVisibleFields: true });
    }, 1000);
    submit = false;
}

问题是你的sleep功能是阻止导航器执行的功能，所以它完全没用，并会认为用户认为你的网站很慢。相反，setTimeout将继续执行其余代码，并在第二个参数中给出的时间过后调用您的函数。

选项卡上的输入的jQuery ValidationEngine验证 - 提示位置和滚动

2 个答案: