Question

我正在使用materialize框架处理表单。我通过将输入字段行变为红色，将输入设置为在用户不满足字段要求（即无效的电子邮件地址）时可视地指示错误。我的任务是在表单顶部显示一个提示，指示用户应该在继续之前修复错误。

使用.blur（）我可以在验证检测到错误时获得向下滑动的提示。但是，当焦点更改回带有错误的字段时，即使输入字段显示红线直到满足要求，提示也会消失。提示应保持到课程“＃34;无效＆＃34;已移除。我建立了一个快速fiddle来证明这一点。

我理解为什么表单会以这种方式表现。在这种情况下是否会有更好的效果.blur（）？

＆＃13;

// Show Error Prompt At Top
$(function() {
  $("input").blur(function() {
    if ($(this).is(":invalid")) {
      $(".e5").slideDown("slow");
    } else if ($(this).is(":valid")) {
      $(".e5").slideUp("slow");
    }
  });
});

＆＃13;

.container {
  width: 400px;
  margin: 0 auto;
  margin-top: 30px;
  border: 1px solid #000;
}

.e5 {
  display: none;
  color: #F44336;
  text-align: center;
  margin-bottom: 15px;
}

.input-field {
  width: 90%;
  margin: 0 auto;
  margin-top: 20px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="e5"> <i class="fa fa-exclamation-triangle"></i> Please correct errors and re-submit</div>
  <div class="input-field suffix">
    <label class="sr-only" for="primary_phone">Phone Number</label>
    <input id="primary_phone" type="tel" pattern="^\(\d{3}\)\s\d{3}-\d{4}$" maxlength="14" class="validate" />
    <label for="primary_phone">Phone Number</label>
    <i class="fa fa-exclamation-triangle"></i>
    <p id="primary_phone_err" class="errp" style="display:none;"></p>
  </div>
  <div class="input-field suffix">
    <label class="sr-only" for="email_address">Email </label>
    <input id="email_address" type="email" maxlength="45" onchange="clean(this);" class="validate" />
    <label for="email_address">Email</label>
    <i class="fa fa-exclamation-triangle"></i>
    <p id="email_address_err" class="error" style="display:none;"></p>
  </div>
</div>

＆＃13;

Answer 1

问题是所有输入都有一个错误消息容器：

$("input").blur(function() {
    if ($(this).is(":invalid")) {
      $(".e5").slideDown("slow");
    } else if ($(this).is(":valid")) {
      $(".e5").slideUp("slow");
    }
  });

因此，当用户模糊没有错误的输入时，您将清除错误消息。

我建议您不要让事件处理程序负责显示或隐藏错误消息，而是向中央对象报告当前输入是否有错误。多个输入可以各自单独注册它们是否有错误。（您可能需要某种ID或密钥来跟踪哪个错误消息属于哪个输入。）

每当添加或删除错误时，中心对象将负责显示或隐藏错误消息。您可以允许显示多个错误消息，或者您可以使用一条错误消息替换另一条错误消息。重要的是，每个输入只允许添加错误或清除它自己的错误（而不是其他输入的错误）。

或者，您可以在每次输入模糊时启动扫描，您的对象将查询每个输入以查找错误。因此，不是每个输入添加或删除错误，每个输入都会启动一个表格扫描，检查和更新所有输入。

如何完全取决于您，并且根据您的技术堆栈，有许多好的策略。在我看来，详细说明如何做到这一点将超出SO答案的范围，但是有一个非常好的MDN article on form validation可以帮助你开始。

jQuery - 在窗体顶部显示错误消息

1 个答案: