2

在我的表单中，我为required所有不能为空的元素添加了一个名为的类。然后我循环使用每个元素$.each()并添加一个名为的类，该类border将为所有这些元素应用 2px 红色边框。

var req = $('.required');
$.each(req, function(){
    var curr_val = $(this).val();
    if(! curr_val)
    {
      $(this).addClass('border');
    }
});

现在页面上有垂直滚动，因此当单击提交时，我希望页面向上滚动到第一个空元素，以便用户知道出现问题，这就是表单未提交的原因

我尝试了什么

我在早期版本的代码中添加了这个块

$.each(req, function(){
    var curr_val = $(this).val();
    if(! curr_val)
    {
      $(this).addClass('border');
      $('html, body').animate({            // added for scrolling purposes
         scrollTop: $(this).offset().top
      }, 200);
    }
});

这行得通，但问题是它会每隔 0.2 秒滚动一次，直到到达最后一个空元素。这对用户来说看起来非常有趣且不受欢迎。

所以我想知道是否有办法让它滚动到第一个空元素发生并停在那里，即使它下面有更多的空元素。当它被填充并再次单击提交时，再次滚动到第一个空元素并将其停在那里。

JS小提琴

这是一个 JS Fiddle，可以帮助您入门，也可以让您了解我所指的有趣行为。注意它是如何一直滚动到最后一个元素的。

JS 演示

4

3 回答 3

3

每当遇到任何空字段时，您都可以通过返回 false 来突破 $.each 。类似这样的东西

$("#submit").on('click',function(){
    var req = $('.required');
    $.each(req, function(e){
        var curr_val = $(this).val();
        if(! curr_val)
        {
          $(this).addClass('border');
          $('html, body').animate({            // added for scrolling purposes
            scrollTop: $(this).offset().top
          }, 200);
            return false;
        }
   });
});​

希望这可以帮助..

于 2012-12-13T08:25:42.157 回答
1

您为每个元素运行动画，解决方案就像添加条件一样简单，只在第一次执行：

var firstTime = true;
$.each(req, function(){
    var curr_val = $(this).val();
    if(! curr_val)
    {
      $(this).addClass('border');
      if(firstTime === true)
      {
          $('html, body').animate({            // added for scrolling purposes
             scrollTop: $(this).offset().top
          }, 200);
          firstTime = false;
      }
    }
});

这是你的小提琴更新。

于 2012-12-13T08:23:39.953 回答
1

如果它是第一个，您可以添加一些标志来标记，这里的想法是：

$(function(){
    var req = $('.required');
    var find = false;

    $.each(req, function(e){
        var curr_val = $(this).val();

        if(! curr_val)
        {
            $(this).addClass('border');

            if(!find){
                $('html, body').animate({            // added for scrolling purposes
                    scrollTop: $(this).offset().top
                }, 200);

                find=true;
            }
        }
   });
});​

修改后的 FIDDLE

于 2012-12-13T08:28:45.960 回答