javascript - Jquery内容 slider : Add an error class to a navigation menu that corresponds to empty section

Question

我有一个被分解为 Jquery 内容 slider (即垂直选项卡)的表单。 这会将表单分成可管理的 block 以供用户填写。

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

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

用于在各部分之间翻转的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 每个部分也位于 <section> 的 HTML 元素中)。

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

  $(".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;
          }
       });
   });

在此代码中，当输入留空时，最接近的 Section标签位于(此部分标签保存表单的特定部分)。计算该部分标签的索引，然后将其应用于相应的 LI导航菜单的。然而，它似乎不起作用，它实际上破坏了所有代码!

这是一个JS Fiddle

Answer 1

我猜有两种可能性。一是在他们完成当前选项卡上的工作之前，不要让他们进入下一个选项卡。这是下面的选项#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。用户很清楚，嘿，这里有些不对劲，我们需要修复它。确保将验证文本清楚地放在用户面前。