禁用Chrome/Firefox在必填字段上的工具提示

Question

我正在处理Angular表单验证，其中用户需要输入必填字段。

为了进行必填字段验证，我使用了Angular表单验证。使用ng-required="true"，但不幸的是在Chrome浏览器中会出现工具提示（如下图所示）。

如果在输入标记中使用novalidate，则验证将不起作用，那么我该如何在提交按钮点击时显示所有无效的必填字段"required messages"？

这里有Fiddler

- RJV

---

novalidate 必须在表单元素上而不是输入标签上。请查看我发布的答案。 - Anirudh Mangalvedhekar

但它只是跳过而没有显示所需的消息。 - RJV

Answer 1

您可以在表单元素中添加novalidate属性以禁用浏览器验证。JS Fiddle

- Jasper Fung

---

如果您知道答案，请在此处分享，不要发布链接。 - Jishnu V S

@JishnuVS 谢谢！ - Jasper Fung

我想要浏览器验证，但希望它能够默默地失败。这该怎么实现？ - cs95

Answer 2

novalidate可以解决您的问题，要在表单提交时显示错误消息，您可以使用form.$submitted事件，在表单提交期间触发。

例如，在您的情况下

 <input type="text" name="taskName" placeholder="Task Name" ng-model="tastName" ng-required="true" />
  <span class="error" ng-show="frm.taskName.$error.required && (frm.taskName.$touched ||  frm.$submitted)">Name is required</span>

更新的 fiddle

（注意：保留了HTML代码，未进行翻译）

- Shailendra Sharma

---

但是表单首先需要提交，然后才能发布所需的消息。 - RJV

请检查更新后的fiddle，您只需要在控制器中检查一个有效的表单，希望它有意义。 - Shailendra Sharma

感谢您的提问，是否有任何方法可以在提交时显示未验证的输入边框... - RJV

我已经完成了，没有问题。看看我的答案吧 :-) - RJV

Answer 3

使用 ng-class 和 form.$submitted 获取答案（感谢 @Shailendra Sharma 的回答）

这个逻辑将在提交时显示错误信息和带有红色边框的输入字段，不会显示任何 Chrome 工具提示。

 <input type="text" ng-class="{'inputError': (frm.taskName.$error.required && (frm.taskName.$touched ||  frm.$submitted))}" name="taskName" novalidate placeholder="Task Name" ng-model="tastName" ng-required="true" />
        <span class="error" ng-show="frm.taskName.$error.required && (frm.taskName.$touched ||  frm.$submitted)">Name is required</span>

{{链接1：Fiddler}}

- RJV

Answer 4

novalidate是一个用于表单的属性，让浏览器停止验证。

这里的文档解释了它的用法https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form

 <form name="frm" ng-submit="add()" novalidate>
      <input type="text" name="taskName" placeholder="Task Name" ng-model="tastName" ng-required="true" />
      <span class="error" ng-show="frm.taskName.$error.required && frm.taskName.$touched">Name is required</span>
      <!--{{ frm.taskName.$error }}-->
      <br />
      <label>estimation time:</label>
      <select ng-model="time" name="time" ng-options="t for t in NOTask" ng-required="true">
        <option value="" selected="selected">Please select</option>
      </select>
      <span class="error" ng-show="frm.time.$error.required && frm.time.$touched">Please select time</span>
      <br /> {{ frm.$valid }}
      <input type="submit" name="name" value="Add" />

    </form>

- Anirudh Mangalvedhekar

---

那么我如何在提交点击时显示所有必填字段消息？ - RJV

这将仅防止默认行为，用户基础验证仍将正常工作。 - Anirudh Mangalvedhekar

当提交按钮被点击时，我该如何显示所有无效输入字段的“必填消息”？ - RJV

你需要在ng-submit函数中处理它。 - Anirudh Mangalvedhekar

我该如何添加它？ - RJV