即使在表单活动验证状态下，如何仅在提交时验证角度表单

关键词：

【中文标题】即使在表单活动验证状态下，如何仅在提交时验证角度表单【英文标题】：How to validate angular form only on submit even at form active validation state 【发布时间】：2017-05-19 15:44:14 【问题描述】：

我有一个表单，我必须仅在提交表单时进行验证，我使用以下角度语法成功完成了该表单

form1.inputvalue.$invalid && form1.$submitted

现在，一旦显示错误并开始验证实时输入（或键盘输入）更改的值。我的客户不想在 keyup 上验证它，并且在更改输入时应该隐藏消息，并且应该在第二次单击提交按钮时再次验证。听起来很奇怪，但需要:)。

我在 ng-change 输入时尝试了 ng-hide="true"。但它没有在控制台中触发。你能帮我我在哪里失踪

$scope.hidevalidate = function()
		console.log("coming to hide");
		$scope.hidevalidation = true;
		console.log("hidden");
	;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<form name="frmdata" novalidate>
<input type="text" 
       class="class1"  
       name="item1" 
       ng-model="frmdata.item1" 
       id="item" 
       ng-change="hidevalidate()"
       ng-blur="focusout('item1');"
       ng-disabled="disableItem1"
       ng-pattern="/^([0-9]1,25)?$/"
       ng-model-options="allowInvalid: true">
  </input>
<div ng-show="frmdata.item1.$invalid && form1.$submitted" >
<div ng-hide="hidevalidation" class="error-message">Item should not be empty (or) only numbers allowed</div>
</div>
</form>

【问题讨论】：

请添加更多代码说明您的操作方式或创建一个 plunkr 【参考方案1】：

您可以使用form1.$setPristine() 将表单标记为全新的，所以理论上它应该就像您第一次来到该页面一样（所以如果您的逻辑第一次正确处理，它应该之后也是如此）。

见https://docs.angularjs.org/api/ng/type/form.FormController

【讨论】：

试过 $setPristine.，但没有用。经过一番谷歌搜索，我发现它可以将验证重置阶段设置为 $dirty 但不是 $invalid.. 所以我什至将错误消息更改为 form1.item.$dirty.，但仍然没有触发。我试过调试，断点正在进入函数并设置 $setpristine 'Undefined'【参考方案2】：

您可以在单击提交按钮时调用一个方法来执行所有检查，并将属性 novalidate 添加到表单中，这样它就不会检查任何内容，因为此方法会检查所有内容并设置所有错误（如果有的话）。

【讨论】：

如何在提交表单时验证 Google reCaptcha

】如何在提交表单时验证GooglereCaptcha【英文标题】：HowtoValidateGooglereCaptchaonFormSubmit【发布时间】：2015-02-1113:44:34【问题描述】：最近，Google彻底改造了他们的reCaptchaAPI，并将其简化为一个复选框。问题是，我可以在不检查的情... 查看详情

表单提交时的角度表单错误组件触发验证

】表单提交时的角度表单错误组件触发验证【英文标题】：Angularformerrorcomponenttriggervalidationonformsubmit【发布时间】：2020-02-1218:22:54【问题描述】：我正在使用Angular8。我有以下反应形式组。this.form=this.fb.group(query:[\'\',[Validators.requ... 查看详情

如何在 ANGULAR 2 中提交表单时重置表单验证

】如何在ANGULAR2中提交表单时重置表单验证【英文标题】：HowtoresetformvalidationonsubmissionoftheforminANGULAR2【发布时间】：2016-04-0901:57:29【问题描述】：我必须在验证的同时重置我的表单。有什么方法可以将表单的状态从ng-dirty重置为n... 查看详情

使用 Jquery Validator 出现验证错误时如何避免或禁用表单提交

...际上，我在使用JQUERYValidator进行表单验证时遇到了问题。即使表单在字段上存在验证错误，它也会被提交。我不确定当字 查看详情

django-allauth：如何仅在电子邮件验证后将用户设置为活动状态

】django-allauth：如何仅在电子邮件验证后将用户设置为活动状态【英文标题】：django-allauth:Howtosetusertoactiveonlyaftere-mailverification【发布时间】：2014-09-0714:11:09【问题描述】：我主要将django-allauth用作为管理后端创建用户帐户的一种... 查看详情

表单验证错误消息以角度提交时显示

】表单验证错误消息以角度提交时显示【英文标题】：Formvalidationerrormessageshowonsubmitinangular【发布时间】：2019-02-2400:43:19【问题描述】：我正在尝试以Angular6验证表单，但无法正常工作。我的代码在stackblitz中。如何验证该表单以... 查看详情

Jquery 仅在第二次点击时验证提交表单

】Jquery仅在第二次点击时验证提交表单【英文标题】：Jqueryvalidatesubmitformonlyonsecondclick【发布时间】：2017-07-2822:38:30【问题描述】：HTML<formclass="form"name="request_more_details"class="new_leads_form_data"action="http://pr.com:3000/leads"accept-c 查看详情

如何验证该字段大于仅在检查特定按钮时

...户单击特定按钮时检查字段值是否大于其他字段值。我的表单上有两个按钮，用于提交具有不同按钮值的值。这是我不知道怎么写的JavaScript代码：$( 查看详情

如何在不提交表单的情况下进行客户端远程验证？

】如何在不提交表单的情况下进行客户端远程验证？【英文标题】：Howtodoclient-sideremotevalidationwithoutsubmitingtheform?【发布时间】：2017-11-0101:38:43【问题描述】：我实际上有一个MVC.Net表单，它使用一个视图模型，其字段具有Required... 查看详情

表单未验证角度 2 中 [ngClass] 的使用

】表单未验证角度2中[ngClass]的使用【英文标题】：Formnotvalidatingonusageof[ngClass]inangular2【发布时间】：2017-12-0922:49:09【问题描述】：我正在尝试对空字段进行验证，如下所示。但是表格没有验证。添加3行时，每行有2列，错误消息... 查看详情

如何在角度 2 中以反应形式重置验证器？

...问题描述】：我使用了angularReactivefrom。但是当我在提交表单后重置表单时，验证器无效并显示无效的表单样式。如何使验证器重置？谁能帮我解决这个问题。【问题讨论】：请贴一些代码Howtoresetformvalidationonsu 查看详情

如何验证邮政编码文本字段并添加 HTML 以防在提交表单时出错？

】如何验证邮政编码文本字段并添加HTML以防在提交表单时出错？【英文标题】：HowtovalidateazipcodetextfieldandaddHTMLincaseoferroronsubmittingtheform?【发布时间】：2022-01-1413:13:51【问题描述】：下面的jQuery代码通过附加更改事件来提醒用户... 查看详情

淘汰赛验证插件 - 仅在表单提交时显示错误消息

】淘汰赛验证插件-仅在表单提交时显示错误消息【英文标题】：Knockoutvalidationplugin-showerrormessagesonlyonformsubmit【发布时间】：2014-08-0916:16:06【问题描述】：我正在使用淘汰赛绑定和淘汰赛验证插件(https://github.com/Knockout-Contrib/Knocko... 查看详情

角度模糊验证阻止提交单独的表单

】角度模糊验证阻止提交单独的表单【英文标题】：Angularblurvalidationpreventingsubmissionofseparateform【发布时间】：2015-11-1220:50:13【问题描述】：我有一个Angular页面，其中包含一个用于添加人员的表单，以及一个用于提交人员列表的... 查看详情

如何仅在数据存在时验证 laravel 输入？

...间】：2022-01-0400:11:20【问题描述】：所以我有一个Laravel表单来收集数据，我使用相同的表单来创建和更新表格。问题是我只想在输入字段包含数据时对其进行验证，这是我的验证逻辑。$validated=$request->validate([\'site_n 查看详情

仅在提交时基于正则表达式的验证

】仅在提交时基于正则表达式的验证【英文标题】：ValidationbasedonaRegularexpressiononlyonsubmit【发布时间】：2014-03-3019:27:54【问题描述】：我使用正则表达式验证价格，但在我完成插入值之前出现错误消息。例如，我在什么时候插入... 查看详情

提交表单时电子邮件值验证错误

】提交表单时电子邮件值验证错误【英文标题】：EmailValueValidationErrorwhensubmittingform【发布时间】：2021-04-2702:20:24【问题描述】：我仅在提交表单并检查值以确保它不为空之后才显示div元素。除电子邮件值外，一切正常。填写姓... 查看详情

仅在选中复选框时提交表单

】仅在选中复选框时提交表单【英文标题】：Submitformonlyifacheckboxischecked【发布时间】：2021-09-2203:47:26【问题描述】：我正在尝试使用javascript提交表单，我需要在验证复选框时在几秒钟内自动发送表单。<formmethod="POST"action="route... 查看详情