1

我有一个表单，它被分解为一个 Jquery 内容滑块（即垂直选项卡）。这会将表单分成可管理的块供用户填写。

目前，如果用户忘记填写某个字段，则会将一个error类应用于表单的该部分。但是，如果该部分不可见，则用户将看不到错误样式。

我想将错误类添加到垂直选项卡导航菜单的相应部分。我怎样才能做到这一点？

用于在section之间翻转的jquery代码如下：

$(".taptabs li").live('click', function() {
     $(this).parent().parent().parent().$('.pages .page').hide().eq($(this).index()).show().addClass("animated").addClass(mode).addClass("fadeInLeft");
});

（Taptabs是导航列表的名称。表单的每个部分都有一个类，page每个部分也在 HTML 元素中<section>）。

我认为这可以使错误消息出现在导航上：

  $(".changing-room").submit(function () {
      var isFormValid = true;
      $("input.required").each( function () {
          if ( $.trim( $(this).val() ).length === 0 ) {
              $(this).parent().addClass("error");
              var menulink = $(this).closest('section').index();
              $('.tapnav li').index(menulink).addClass('error'); 

              isFormValid = false;
          }
       });
   });

在此代码中，当 Input 为空时，将Section定位最近的标签（此部分标签包含表单的特定部分）。计算该部分标签的索引，然后将其应用于LI导航菜单的对应部分。但是，它似乎不起作用，它实际上破坏了所有代码！

这是一个JS 小提琴

4

2 回答 2

0

我猜有两种可能。一个是在他们完成当前选项卡上的工作之前，您不要让他们进入下一个选项卡。这是下面的选项#1。正如您所说的选项＃2是以某种方式设置选项卡的样式，以便他们可以看到他们需要返回它。见下文#2。

#1：

在您的点击事件中（使用 .on() 而不是 .live()）将包含的代码包装在：

if(!$('.error').length){
   //All the code you have in your event now should be here - that is, there are no errors they can proceed.
} else {
  //else is optional.  Here you could do whatever you want to tell the user - "no, you can't move on because you have a validation issue.  Here is a suggestion:
  alert('You have errors! ' + someerrorvar);
}

#2

同样，如上所述使用 .on() 事件而不是 .live() 因为 .live() 不再存在。

我将假设有一个类指示某个选项卡是活动选项卡。我们称该类为“tater”，因为它没有真正的类名。如果是这样，就这样使用它：

//在您的活动开始时，在您拉动开关之前 $('.tater').addClass('incomplete');

然后根据需要使用不完整的样式设置该选项卡。

最后的想法：

我会选择#1。用户很清楚，嘿，这里有问题，我们需要修复它。确保将验证文本清楚地放在用户面前。

于 2013-07-16T20:06:41.133 回答
0

我想通了：

$(".MY-WRAPPER-CLASS").submit(function () {
    var isFormValid = true;
    $("input.required").each(function () {
      if ($.trim($(this).val()).length === 0) {
        $(this).parent().addClass("error");
         var menulink = $(this).closest('section').index(); //Note 1
        $('.tapnav li').eq(menulink).addClass('error');  //Note 2

        isFormValid = false;
      }
      else {
        $(this).parent().removeClass("error");
      }
    });

  });

注1：我们使用.closest()查找空表单元素的父<section>标签。然后我们使用.index()来查找该部分的索引值。然后将其分配给一个名为 menu link 的变量。

注意 2：然后我们使用.eq()与该部分具有相同索引值的菜单链接作为目标。

于 2013-07-17T08:23:16.583 回答