禁用所需字段上的chrome / firefox工具提示

Question

我正在进行角形式验证，用户需要输入字段（这是必需的）

要处理必要的字段验证，我使用了角形式验证。运用 novalidate，但遗憾的是我在Chrome浏览器上获得工具提示。 （见下图）

如果我在输入标记中使用{{1}}。验证不起作用， 那么如何在提交按钮上单击显示所有无效输入字段“必需消息”？

Fiddler here

Answer 1

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

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>

Updated fiddle

Answer 3

使用ng-class和form获得答案。$ submit（感谢@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>

Fiddler

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>