3

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

  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'));
        },
4

3 回答 3

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 语句放在任何括号之外。

希望这将帮助其他人节省我花费数小时的开发时间:)

于 2013-03-28T14:40:59.300 回答
0

在这里，我获取当前步骤并查找所有输入，然后循环遍历步骤中的输入以确定每个输入是否有效。然后，如果有错误，我会返回。

如果我不使用标志“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
于 2013-03-28T13:24:22.200 回答
0

我想你会想要确保你的表单域的一个子集是有效的，即当前选项卡中的域。

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

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

叫这个

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

结果将是 1 或零，1 有效 0 无效

于 2013-03-28T11:42:46.483 回答