Twitter Bootstrap 表单向导/Jquery.validate - 如果表单无效，防止用户移动到下一个选项卡

Question

到目前为止，我尝试了以下操作：

1. 在onNext - 第一件事if (!form.valid()) { return false; } 这仍然将用户移动到以下标签。

2. 在onNext - 第一件事：

   如果 (!form.valid()) {

   $('.error').first().focus()

   返回假；

   }

   不过，向导已移至下一个选项卡。

3. `$('.button-next').click(函数(e){

     if (!form.valid()) {
   
       e.preventDefualt();
   
       return false;
      }
   
    return true;
   
   }`
   

仍然没有帮助。

如果表单目前无效，如何防止用户移动到另一个选项卡？

顺便说一句，验证工作正常 - 无效字段被正确突出显示。

更新 - 代码 onNext 函数

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”，而只返回有效/无效，则验证检查会在每个字段上停止。可能有多个字段无效，但它只会更新显示给用户的第一个字段的错误消息。所以我做了这个标志，以便所有无效的输入都会显示错误消息，这就是为什么我循环它们并单独检查它们，如果它在单个步骤上有效/无效，我可以执行其他步骤。

                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