Question

到目前为止，我试过以下：

在onNext - 第一件事if (!form.valid()) { return false; }中，这仍然将用户移至关注标签。
在onNext中 - 首先：

if（！form.valid（））{

$（ '错误'）。第一（）。对焦（）

返回false;

}

然后，向导移动到下一个标签。

`$（'。button-next'）。点击（function（e）{

  if (!form.valid()) {

    e.preventDefualt();

    return false;
   }

 return true;

}`

仍然没有帮助。

如果到目前为止表单无效，如何防止用户移动到另一个标签？

顺便说一下，验证工作正常 - 没有正确突出显示有效字段。

更新 - 代码 onNext func

onNext: function (tab, navigation, index) {
            console.log('in on next');

            if (!form.valid()) {
                console.log('not valid');
                $('.error').first().focus();
                return false;
            }

            var total = navigation.find('li').length;
            var current = index + 1;
            // set wizard title
            $('.step-title', form).text('Step ' + (index + 1) + ' of ' + total);
            // set done steps
            jQuery('li', form).removeClass("done");
            var li_list = navigation.find('li');
            for (var i = 0; i < index; i++) {
                jQuery(li_list[i]).addClass("done");
            }

            if (current == 1) {
                form.find('.button-previous').hide();
            } else {
                form.find('.button-previous').show();
            }

            if (current >= total) {
                form.find('.button-next').hide();
                form.find('.button-submit').show();
            } else {
                form.find('.button-next').show();
                form.find('.button-submit').hide();
            }

            App.scrollTo($('.page-title'));
        },

Answer 1

我的目标：如果当前步骤中的任何字段无效，请停止向导转移到下一个选项卡。允许用户修复所有无效字段，然后继续执行下一步。

我将onNext功能更改为以下内容：

onNext: function (tab, navigation, index) {
            console.log('in on next');

            var allowStep = form.valid();

            if (allowStep) {

                var total = navigation.find('li').length;
                var current = index + 1;
                // set wizard title
                $('.step-title', form).text('Step ' + (index + 1) + ' of ' + total);
                // set done steps
                jQuery('li', form).removeClass("done");
                var li_list = navigation.find('li');
                for (var i = 0; i < index; i++) {
                    jQuery(li_list[i]).addClass("done");
                }

                if (current == 1) {
                    form.find('.button-previous').hide();
                } else {
                    form.find('.button-previous').show();
                }

                if (current >= total) {
                    form.find('.button-next').hide();
                    form.find('.button-submit').show();
                } else {
                    form.find('.button-next').show();
                    form.find('.button-submit').hide();
                }

                App.scrollTo($('.page-title'));
            }

            return allowStep;
        },

到目前为止，我不知道为什么如果声明没有相同的效果，从内部返回false。

为了完成这项工作，请停止向前转移用户的向导表单，我必须将return语句放在任何括号之外。

希望这会帮助其他人节省我花费的时间：）

Answer 2

我认为您需要确保表单字段的子集有效，即当前标签中的字段。

您可以使用valid（）插件方法，但将其应用于表单字段的集合。只要表单字段包含在表单中，那么这将起作用。例如，检查所有字段，如

<form>
<div id="tab1">
 ...form fields here
</div>
...other tabs here
</form>

称之为

var result = $('div#tab1 :input').valid()

结果将为1或0,1有效0不是

Answer 3

这里我得到当前步骤并找到所有输入，然后我遍历步骤中的输入以确定每个输入有效/无效。如果出现错误，我会返回。

如果我不使用标志“hadError”，只返回有效/无效，则验证检查在每个字段上停止。可能有多于1个字段无效，但它只会更新为其找到的第一个字段显示给用户的错误消息。所以我创建了标志，以便所有无效输入都会显示错误消息，这就是为什么我循环它们并单独检查它们，如果它在单个步骤基础上无效，我可以执行其他步骤。

                var tabs = $(".tab-pane"); // get the steps
                var currentTab = tabs[index - 1]; //get the current step

                var inputs = $(":input"); // get all the form inputs
                var stepElements = $(currentTab).find(inputs); // get inputs for current step
                var count = stepElements.length; // check that there are inputs
                if (count <= 0) {                // if there are not no reason to loop them 
                    return true;                 // this can be used to perform other action if there are no steps 
                }
                $(stepElements).each(function (idx) {
                    isValid = $(document.forms[0]).validate().element($(this)); // check that the input is valid. This can also be used on a per input basis to perform another action if the field is not valid. 
                    if (!isValid) { hadError = true; } // set our flag if there was an error 

                });

                return !hadError; //return the value of the flag.

注意：这仅适用于输入而非选择。您可以尝试更改行

                var inputs = $(":input"); // get all the form inputs

包括选择

                var inputs = $(":input, select"); // get all the form inputs and selects

Twitter Bootstrap Form Wizard / Jquery.validate - 如果表单无效，则阻止用户移动到下一个选项卡

3 个答案: