在 angularjs 中提交时显示验证错误消息

2024-03-16

我有一个表单,如果单击“提交”,则需要显示验证错误消息。

这是一个工作plunker http://plnkr.co/edit/nYPzEO8d3SKuFk4KBn1o?p=preview

 <form name="frmRegister" ng-submit="register();" novalidate>
      <div>
        <input placeholder="First Name" name="first_name" type="text" ng-model="user.firstName" required />
        <span ng-show="frmRegister.first_name.$dirty && frmRegister.first_name.$error.required">First Name is required</span>
      </div>
      <div>
        <input placeholder="Last Name" name="last_name" type="text" ng-model="user.lastName" required />
        <span ng-show="frmRegister.last_name.$dirty && frmRegister.last_name.$error.required">Last Name is required</span>
      </div>
      <div>
        <input placeholder="Email" name="email" type="email" ng-model="user.email" required />
        <span ng-show="frmRegister.email.$dirty && frmRegister.email.$error.required">Email is required.</span>
        <span ng-show="frmRegister.email.$dirty && frmRegister.email.$error.email">Invalid Email address.</span>
      </div>
      <input type="submit" value="Save" />
      <span ng-show="registered">YOU ARE NOW REGISTERED USER</span>
 </form>

当用户开始进行更改时,验证正常进行。但如果单击“提交”而不输入任何内容,它不会显示任何错误消息。

有想过实现这个目标吗?或者以其他方式,当单击“提交”按钮时,如何使每个输入字段 $dirty


我找到了这个小提琴http://jsfiddle.net/thomporter/ANxmv/2/ http://jsfiddle.net/thomporter/ANxmv/2/它做了一个漂亮的技巧来引起控制验证。

基本上它声明了一个范围成员submitted并在单击“提交”时将其设置为 true。模型错误绑定使用这个额外的表达式来显示错误消息,例如

submitted && form.email.$error.required

UPDATE

正如指出的@哈菲兹的评论 https://stackoverflow.com/questions/18798375/show-validation-error-messages-on-submit-in-angularjs#comment44380864_18799099(给他一些赞成票!)Angular 1.3+ 解决方案 https://docs.angularjs.org/guide/forms#binding-to-form-and-control-state很简单:

form.$submitted && form.email.$error.required
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

在 angularjs 中提交时显示验证错误消息 的相关文章

  • 当来源为 http 且目标 url 为 https 时,如何在本地网络中发出 POST 请求?

    我需要从 POS 销售点 http 向支付终端 https 发出 POST 请求 它们连接在我的本地网络中 当我向邮递员发出请求时 一切正常 但每当我从 POS 发出请求时 我都会收到错误 POSThttps 我的IP地址 8443 nex
  • Web SQL 将数据插入多行

    我尝试在 Web SQL 数据库中一次将变量插入多行 但使用我所知的所有方法时 我收到错误 INSERT INTO tab a b VALUES v1 v2 v3 v4 gt gt could not prepare statement 1
  • 如何将文本插入摩纳哥编辑器?

    我的应用程序中嵌入了摩纳哥代码编辑器 如何以编程方式在特定行上插入文本 var editor monaco editor create document getElementById container value First line n
  • 带标签的 Material-ui 文本字段[关闭]

    Closed 这个问题需要多问focused help closed questions 目前不接受答案 谁能告诉我如何在material ui lib中制作带有标签的文本字段 寻找这样的东西 https github com callem
  • 如何防止客户修改 firebase 数据(在没有后端的 Web 应用程序中)?

    我最近开始探索 firebase 作为我的 Angular JS 单页网站的身份验证解决方案 它看起来很完美 然而 从安全角度来看 我不太确定是否将逻辑保留在我的应用程序中的客户端 假设我对在我的网站上注册的客户进行了 isProfileC
  • 提交后如何重置表单?

    我有一个简单的表格 假设它需要一个电子邮件地址 提交表单后 消息堆栈会通知用户其地址已成功提交 问题是 提交地址后 带有电子邮件的表单字段仍然包含用户输入的电子邮件地址 我该如何重置该字段 我必须为此使用 JavaScript 吗 谢谢 w
  • .map() Javascript ES6 地图?

    你会怎么做 本能地 我想做 var myMap new Map thing1 1 thing2 2 thing3 3 wishful ignorant thinking var newMap myMap map key value gt v
  • jqGrid如何将额外的类应用于标题列

    我想在特定列上应用一个额外的类 我知道通过在 colModel 中指定这一点对于行是可能的 但这些类仅应用于 结果行 中的列 而不应用于标题 我想要达到的是通过简单的类名隐藏较小视口的特定列 与 Twitter Bootstrap 一起使用
  • 我可以检测焦点来源吗? (Javascript、jQuery)

    快速提问 是否可以检测焦点是来自鼠标单击还是来自焦点事件的选项卡 我想如果没有 我将不得不在同一元素上使用单击句柄来确定源 但我更喜欢通过焦点事件的方式 Thanks Gausie 可能无法 100 工作 但如果没有直接的方法 那么你不能直
  • 跨浏览器兼容音频有哪些选项?

    我正在使用这个功能 function playSound file MyAudio new Audio file MyAudio play 不幸的是 我正在努力寻找一种适用于所有浏览器的文件类型 Mp3 适用于 Chrome Safari
  • 在 AMP 中包含自定义 JavaScript 的最佳方式

    我阅读了有关脚本标记的所有文档 但找不到如何在 AMP HTML 中包含自定义 JavaScript 我知道
  • TypeError:React 中的循环对象值

    这是我的代码 sendMail e e preventDefault fetch https uczsieapp mailer herokuapp com var name document getElementById name var
  • Karma 测试报告运行速度快,但实际上运行速度慢

    最好的解释是a video https youtu be Zwwi01JuPrQ 或参见下面的 gif 您会注意到 Karma 进度报告器报告测试只需要几毫秒 但显然需要相当长的时间 我在推特上提到了这一点 https twitter co
  • JavaScript 数组中的空项和未定义项有什么区别? [复制]

    这个问题在这里已经有答案了 考虑以下 JavaScript 代码 在节点 REPL 中 gt let a new Array 10 undefined gt a lt 10 empty items gt gt a map e gt 1 lt
  • 传单地图显示为灰色

    我正在启动 leaflet js快速开始 http leafletjs com examples quick start html但我的地图显示为灰色 我缺少什么吗 脚本 js var leafletMap L map leafletMap
  • 未捕获错误:找不到从“ui/app”loader.js 导入的模块“ember”:164

    我使用以下命令构建并提供我的 ember 应用程序 ember build ember serve 两者都按预期工作 然后我转到以下 localhost 4200 URL 查看应用程序 并在 javascript 控制台中看到以下错误 Un
  • JavaScript IDE/编译器

    现在 我希望你们中的一些人能够理解我的要求 我是编程新手 我在 Codecademy com 上了解了 JavaScript 我使用 labs codecademy com 来编写 JavaScript 但它有限制 对于编程新手来说 我可以
  • 包括来自raw.github.com的js

    我有一个 github com 演示页面 链接到https raw github com master file js https raw github com master file js这样我就不需要总是复制 js文件转移到gh pag
  • RegisterClientScriptCode 在部分回发后不起作用

    以下代码行位于 SharePoint 网站的用户控件中 ScriptManager RegisterClientScriptBlock this this GetType jquery144 false ScriptManager Regi
  • 加密 Chrome 扩展程序?

    无论如何 要加密 Chrome 扩展程序 以免暴露源代码 您可以使用混淆器隐藏您的代码 市场上有很多可用的 像Google Closure编译器这样的工具很少 而且市场上有很多在线javascript ofuscators 你可以使用任何一

随机推荐

  • 保留 WinRT 应用程序设置的最佳方式?

    我正在开发一个 WinRT 应用程序 它实际上也是一个游戏 我需要以文件或其他方式保存不同的信息 例如音频设置或播放器统计信息 如果它是一个文件 只需将设置写入或 我有一个想法 但我认为太初级了 获得这个的最佳方法是什么 非常感谢任何帮助或
  • PostgreSQL 字符串转义设置

    我有 2 台服务器 S1 S2与相同的SELECT version 使用相同的数据库test包含一个表t1具有类型的列text 我尝试插入 2 个带有符号的字符串数组 其中之一 INSERT into t1 columnname VALUE
  • 如何获取Scala函数的参数/返回类型?

    我有一个函数 想要获取它的参数类型和返回类型以在 Scala 宏中使用 scala gt val fn a String b Double gt 123 fn String Double gt Int
  • 尝试远程连接到 websphere 上的 JMS 队列时出现 sun/io/MalformedInputException

    我知道 非常 类似的问题 https stackoverflow com questions 27272877 how to solve sun io malformedinputexception during jndi lookup o
  • 找不到模块“反应”

    我正在尝试将 React 集成到现有的网页中 目前 我无法加载我的 React 应用程序 我的 React 应用程序有两个文件 这时 他们的样子是这样的 myApp js import React from react import Rea
  • 使用 python 2.5 安装 django,而不是使用默认版本的 python

    我必须在我的 Linux 服务器上安装 Django 其中 python 2 4 可作为默认安装 我已经安装了 python 2 5 作为单独的版本 现在我必须安装 Django 我必须将其与 python 2 5 一起使用 是否有任何特定
  • 将数据类型 varchar 转换为数字动态数据透视表时出错

    我收到标题中描述的错误 其中我的代码如下所示 declare cols numeric 10 0 sql numeric 10 0 select cols isnull cols T AmountPayd from select disti
  • 将 AST 节点转换为 python 代码

    假设我有以下字符串 code if 1 1 and 2 2 and 3 3 test 1 以下代码将该字符串转换为 AST ast parse code 然后我有一棵树 Module body lt ast If object at 0x1
  • 如何使用 Firebase 刷新令牌来持久进行身份验证?

    我几周来一直试图解决这个问题 但似乎无法理解文档或其他东西 我很感激你能提供的任何帮助 我正在使用 Firebase SDK 我有我的服务器端路由 我可以在其中访问令牌并将其发送到前端 const admin require firebas
  • 如何正确获取在 AppEngine 上运行的 NodeJS 中的云功能的令牌?

    我在获取正确的令牌来触发我的云功能时遇到问题 通过 POSTMAN 测试时 我通过运行以下命令获取令牌 gcloud auth print identity token 我的功能工作正常 但在我的服务器上我使用以下代码 我也确实看到了该令牌
  • 2 个相互关联的案例陈述

    我对 SQL 编码比较陌生 并且有一个关于 case 语句的问题 我想要实现的目标 我想创建一个用于计算正确的过时规定的查询 为此 我需要创建一个名为的列Inventory Reach和一个叫Devaluation Class 这两个字段都
  • 如何导入和导出 JBPM 6.5 存储库

    我想问您是否知道如何在不同的 Kie Workbench 之间导出和导入 JBPM 项目 我正在使用 JBPM 6 5 谢谢 使用 Git 可能是唯一合理的方法 按照此顺序 可以将项目放入 git 存储库 然后将其导入到其他实例 在装有 j
  • 抛出检查异常

    我在Java中的一些方法会抛出异常 例如NoSuchElementException IllegalArgumentException等 但是当使用这些方法时 这些异常似乎是未经检查的 换句话说 我的方法的调用者不需要对抛出这些异常的方法执
  • 在 Ruby on Rails 5 中禁用 ActiveRecord

    我是 Rails 的新手 我想在 Rails 5 中禁用 ActiveRecord 我已经找到了几个答案Here https stackoverflow com questions 28319002 how do i remove acti
  • 将整数列表传递给 GET REST API

    我想从前端的数据库中获取实体列表 所以我在 Spring MVC 中编写了 POST REST HTTP 调用 但我读过 HTTP 文档 其中说每当您必须从数据库检索数据时 更喜欢 GET 调用 那么 是否有任何我可以将 Angular J
  • 如何在android中加载低质量然后高质量的图像(就像WhatsApp个人资料图像)

    我正在寻找一种可以使用的设计模式 以便在 android recyclerView 中我可以以低质量快速加载图像 然后还可以调用高质量图像将 之后重写低质量图像 我经常看到先加载低质量图像 然后再加载高质量图像 但是 这是如何在回收器视图的
  • Javascript 在日期对象本身中设置时区,如 setTimeOffset() [重复]

    这个问题在这里已经有答案了 我想更改 Date 对象本身的时区 因为设备 网络浏览器 本身不支持时区 我怎么改变它 例如 var date new Date Value is Mon Jun 19 2017 10 00 08 GMT 000
  • Android 显式 Intent 抛出 NoClassDefFounderror

    我正在尝试使用明确的意图在我的 Android 应用程序中显示 MapView 尽管我没有发现我的代码有任何问题 但当我尝试启动我的活动时 我不断收到 NoClassDefFoundError 基本上 从我的主要活动 SetCriteria
  • 多线程Python网络爬虫卡住了

    我正在编写一个Python网络爬虫 我想让它成为多线程的 现在我已经完成了基本部分 以下是它的作用 一个线程从队列中获取一个url 线程从页面中提取链接 检查链接是否存在于池 集合 中 并将新链接放入队列和池中 该线程将 url 和 htt
  • 在 angularjs 中提交时显示验证错误消息

    我有一个表单 如果单击 提交 则需要显示验证错误消息 这是一个工作plunker http plnkr co edit nYPzEO8d3SKuFk4KBn1o p preview