Question

当用户尝试提交表单而未在必填字段（class =“required”）中输入数据时，字段将突出显示并获得焦点。除非字段是选择选项。该字段突出显示，但用户未返回到该字段。在这种情况下，用户必须向上滚动。

我需要表单向上滚动到突出显示的字段，就像它与其他输入类型一样。有谁知道这方面的解决方案？

TIA。

Answer 1

你尝试过这样的事吗？它将我滚动到选择位于Firefox / Safari / Chrome中的顶部。

$('#form').submit(function(e) {
    if (yourSelectFailsValidaton) {
        e.preventDefault();
        $('select').focus();
    }
});

http://jsfiddle.net/9YwDF/

Answer 2

我会用锚标签来做。为每个所需输入创建一个锚点。检查所需的输入。如果找到空白的，请跳转到相应的锚点。

<html>
  <head>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("jquery", "1");
    </script>
    <script type="text/javascript">
      function jumpToRequired() {
        $("input.required").each(function() {
          var input = $(this);
          if (!input.attr("value")) {
            window.location.hash = input.attr("id") + "_a";
            return;
          }
        });
      }
  </script>
  </head>
  <body>
    <a name="whatever_a"></a>
    <input type="text" id="whatever" class="required" />
    <button type="button" onclick="jumpToRequired()">Jump to required.</button>
  </body>
</html>

Jquery表单验证，将用户返回到必填字段

2 个答案: