关键词：
【中文标题】单击提交按钮时如何触发所有验证？【英文标题】：How do I trigger all validations when submit button is clicked? 【发布时间】：2016-12-10 02:13:47 【问题描述】：我已经为我的表单添加了验证，我希望它在单击提交按钮时触发每个验证。我尝试在谷歌上搜索如何触发它们，但它们似乎对我不起作用。
这是我的表单代码
<form id="CustomerForm" class="form-horizontal group-border stripped" name="CustomerDetails" novalidate ng-submit="CustomerDetails.$valid && AddCustomer()">
<div class="form-group" ng-class="'has-error': CustomerDetails.cname.$invalid && !CustomerDetails.cname.$pristine">
<label class="col-lg-2 col-md-3 control-label">Customer Name</label>
<div class="col-lg-10 col-md-9">
<input type="text" ng-model="CusDetails.cname" class="form-control" name="cname" id="cname" required />
<p ng-show="CustomerDetails.cname.$error.required && !CustomerDetails.cname.$pristine" class="help-block">Customer name required!</p>
</div>
</div>
<!--end of .form-group-->
<div class="form-group" ng-class="'has-error': CustomerDetails.comname.$invalid && !CustomerDetails.comname.$pristine">
<label class="col-lg-2 col-md-3 control-label">Company Name</label>
<div class="col-lg-10 col-md-9">
<input type="text" ng-model="CusDetails.comname" class="form-control" name="comname"id="comname" required />
<p ng-show="CustomerDetails.comname.$error.required && !CustomerDetails.comname.$pristine" class="help-block">Comapany name required!</p>
</div>
</div>
<!--end of .form-group-->
<div class="form-group" ng-class="'has-error': CustomerDetails.ctel.$invalid && !CustomerDetails.ctel.$pristine">
<label class="col-lg-2 col-md-3 control-label" for="">Telephone Number</label>
<div class="col-lg-10 col-md-9">
<div class="input-group input-icon">
<span class="input-group-addon"><i class="fa fa-phone s16"></i></span>
<input ng-model="CusDetails.tel" class="form-control" name="ctel" type="text" placeholder="(999) 999-9999" id="ctel" required >
<p ng-show="CustomerDetails.ctel.$error.required && !CustomerDetails.ctel.$pristine" class="help-block">Telephone number required!</p>
</div>
</div>
</div>
<!-- End .form-group -->
<div class="form-group" ng-class="'has-error': CustomerDetails.email.$invalid && !CustomerDetails.email.$pristine">
<label class="col-lg-2 col-md-3 control-label" for="">Email address</label>
<div class="col-lg-10 col-md-9">
<input ng-model="CusDetails.email" type="email" class="form-control" name="email" placeholder="someone@example.com" id="email" required >
<p ng-show="CustomerDetails.email.$error.required && !CustomerDetails.email.$pristine" class="help-block">Email is required!</p>
<p ng-show="CustomerDetails.email.$error.email && !CustomerDetails.email.$pristine" class="help-block">Please Enter valid email address.</p>
</div>
</div>
<!-- End .form-group -->
<div class="form-group">
<div class="col-lg-9 col-sm-9 col-xs-12">
<button name="btnSubmit" type="submit" class="btn btn-info pad"><span class="fa fa-user-plus"></span> Add Customer</button>
<button type="button" id="cancel" class="btn btn-default pad">Cancel</button>
</div>
</div>
</form>
更新：我已经根据 Adrian Brand 更改了代码，但仍然没有触发。我做错了什么？
这是我的 angularjs 表单。 （控制器）
(function ()
'use strict';
angular
.module('efutures.hr.controllers.customer', [])
.controller('AddCustomerController', AddCustomerController);
AddCustomerController.$inject = ['$scope', '$location', '$rootScope', '$http', 'CustService'];
function AddCustomerController($scope, $location, $rootScope, $http, CustService)
(function initController()
)();
$scope.AddCustomer = function ()
var CustomerDetails =
cname: $scope.CusDetails.cname,
comname: $scope.CusDetails.comname,
tel: $scope.CusDetails.tel,
email: $scope.CusDetails.email
;
if ($scope.CustomerDetails.$valid)
CustService.Customer(CustomerDetails, function (res)
console.log(res);
$.extend($.gritter.options,
position: 'bottom-right',
);
if (res.data == 'success')
$.gritter.add(
title: 'Success!',
text: 'Successfully added the new customer ' + '<h4><span class="label label-primary">' + CustomerDetails.cname + '</span></h4>',
time: '',
close_icon: 'l-arrows-remove s16',
icon: 'glyphicon glyphicon-ok-circle',
class_name: 'success-notice'
);
$scope.CusDetails = ;
$scope.CustomerDetails.$setPristine();
else
$.gritter.add(
title: 'Failed!',
text: 'Failed to add a new customer. Please retry.',
time: '',
close_icon: 'l-arrows-remove s16',
icon: 'glyphicon glyphicon-remove-circle',
class_name: 'error-notice'
);
);
)();
我什至尝试过制作submitted true 的表格，但还是不行。 唯一对我有用的是在验证之前禁用按钮，但这不是要求。我希望它在单击提交表单时触发。非常感谢您的帮助。
【问题讨论】：
我猜你想要的可以通过不触发自动提交（即type="submit"）但具有函数调用（即ng-click="Check_Input()"）来实现。然后定义$scope.Check_Input = function () 并在那里进行检查。
我没有使用过 jQuery 和 angularjs，但你为什么不创建一个新函数来调用所有其他验证函数并将其分配给你的按钮？
您想在按下提交按钮后仅显示验证消息吗？每当输入值更改时都会触发 Angular 验证，因此如果您严格希望在特定事件之后运行验证，那么您可能必须使用某种编程模型验证，例如egkyron.
@NikosParaskevopoulos，两者都有。假设客户不小心按下了提交按钮，而不是给出控制台错误或什么都不说，我想表明这些字段在提交之前是必需的。
【参考方案1】：
在要触发验证的点击事件中，添加以下内容：
vm.triggerSubmit = function()
vm.homeForm.$setSubmitted();
...
这对我有用。要了解有关此的更多信息，请单击此处：https://code.angularjs.org/1.3.20/docs/api/ng/type/form.FormController
【讨论】：
请不要这样做！如果你这样做，你会给你的控制器太多关于你的视图的知识。控制器不知道视图，控制器为视图编组数据，但他们不知道视图上有哪些表单。【参考方案2】：您的问题在于您的提交按钮未包含在表单中，因此表单永远不会被提交。您只是通过点击处理程序运行控制器方法。
表单验证不是控制器关注的问题，在控制器中没有位置。这纯粹是一个视图问题。
在您的表单中，您放置一个 ng-submit="CustomerDetails.$valid && AddCustomer()" 并将点击处理程序从提交按钮中取出并将按钮行放置在表单中。这样视图只会在表单有效的情况下提交。不要用表单验证污染您的控制器，并将其全部包含在您的视图中。您应该将控制器视为语法，然后您甚至无法访问控制器中的 $scope。
【讨论】：
Angular 2 提交时触发表单验证
...钮就会被禁用，但我希望始终启用提交按钮，并且当用户单击提交时，应该验证表单。有谁知道我该如何完成这项工 查看详情
单击提交按钮时如何将php验证文件调用到html文件
】单击提交按钮时如何将php验证文件调用到html文件【英文标题】：Howtocallphpvalidationfiletohtmlfilewhenclickedonsubmitbutton【发布时间】：2014-04-0522:48:39【问题描述】：我正在尝试将PHP验证文件调用到HTML文件中。任何人都可以建议我单击... 查看详情
在提交 Angular4 时触发表单验证
...控件并触摸或原始但它不起作用。有人能帮帮我吗？如果单击提交按钮并且表 查看详情
单击提交按钮时触发 Ajax 调用
】单击提交按钮时触发Ajax调用【英文标题】：FiringAjaxcallwhenclicksubmitbutton【发布时间】：2012-03-2919:05:17【问题描述】：在我的Rails3.1应用程序中，我有一个在单击时弹出的Jquery对话框，其中有一个提交按钮。我在制作这个“提交... 查看详情
jQuery验证两个提交按钮
...尝试根据按下哪个提交按钮来触发两个单独的函数。当我单击“提交1”时，控制台日志中出现“openMailer_1”，但是当我单击“提交2”时，“openMailer_1”再次出现，而不是“openMailer_2”。知道我在这里做错了什么吗？$(\'*[id^=sub 查看详情
触发 Angular 表单提交中所有字段的验证
...d2kfToPmiiA?p=preview仅验证模糊字段。这很好用，但是当用户单击“提交”按钮（不是真正的提交，而是对函数的data-ng-cl 查看详情
Semantic-UI 避免某些按钮单击事件的表单验证触发
】Semantic-UI避免某些按钮单击事件的表单验证触发【英文标题】：Semantic-UIavoidformvalidationtriggerforsomebuttonclickevents【发布时间】：2021-07-2703:48:22【问题描述】：因此，默认情况下，Semantic-ui没有任何方法来阻止触发验证的点击，一... 查看详情
如何根据单击的提交按钮选择父表单？
】如何根据单击的提交按钮选择父表单？【英文标题】：HowdoIselecttheparentformbasedonwhichsubmitbuttonisclicked?【发布时间】：2010-09-2314:51:01【问题描述】：我有一个网页，上面有3个表单。没有嵌套，只是一个接一个（它们几乎相同，只... 查看详情
同一按钮单击时的表单验证和 Ajax 调用
】同一按钮单击时的表单验证和Ajax调用【英文标题】：FormValidation&AjaxCallonSameButtonClick【发布时间】：2018-07-1713:55:32【问题描述】：我有一个提交表单的按钮，我想先触发jqueryValidation并检查表单是否有效。我尝试在下面执行... 查看详情
ASP.NET 使用 HTML 5 提交按钮防止表单验证
...在尝试使用HTML5按钮元素来提交ASP.NET表单。我还希望它在单击时不触发验证。这将提交表单，但仍会触发验证：<buttonrunat="server"CausesValidation="false" 查看详情
单击提交按钮时如何传递单击按钮的值？
】单击提交按钮时如何传递单击按钮的值？【英文标题】：Howpassaclickedbutton\'svaluewhensubmitbuttonisclicked?【发布时间】：2019-07-2213:03:38【问题描述】：我有一个带有多个按钮和一个提交按钮的HTML表单。我正在尝试传递在单击提交按... 查看详情
名称为提交的按钮停止触发表单的提交事件？ [复制]
...述】：我刚刚遇到了关于jQuery表单提交的问题。我试图在单击按钮时使用jQueryajax验证重复的表单字段。如果用户重复显示消息，否则触发表单提交功能。这是我的代码：<formme 查看详情
如何在单击 CF7 提交按钮时在弹出窗口中显示 grecaptcha？
】如何在单击CF7提交按钮时在弹出窗口中显示grecaptcha？【英文标题】：HowtoshowgrecaptchainapopuponclickingCF7Submitbutton?【发布时间】：2019-10-1301:56:37【问题描述】：我正在ContactForm7中创建一个新表单。我需要在单击提交按钮时在弹出窗... 查看详情
单击按钮时如何防止表单提交？ [复制]
】单击按钮时如何防止表单提交？[复制]【英文标题】：Howtopreventformsubmitwhenabuttonclicked?[duplicate]【发布时间】：2014-08-1512:20:44【问题描述】：我有一个包含按钮的表单，单击按钮时会提交表单，以及如何防止这种情况发生。例如... 查看详情
ReactJs：单击提交按钮时读取所有表单输入值
】ReactJs：单击提交按钮时读取所有表单输入值【英文标题】：ReactJs:Readingalltheforminputvalueswhenclickingonthesubmitbutton【发布时间】：2020-08-0303:14:38【问题描述】：我的表单由多行组成：这是代码：<Form><Rowform><Colmd=3><Fo... 查看详情
AngularJS：表单内的所有按钮触发提交？
...使用了几个按钮，因为我正在使用twitterbootstrap。问题是单击表单中的任何按钮似乎都会触发提交事件到Angular：在我的表单中有几 查看详情
单击提交按钮时如何放置进度光标
】单击提交按钮时如何放置进度光标【英文标题】：HowcaniputaprogresscursorwhenSubmitbuttonclicked【发布时间】：2015-01-2620:36:48【问题描述】：如何在我的代码中添加进度光标，以通知用户在点击提交按钮或上传多个文件时等待上传按钮... 查看详情
当我单击触发它显示的链接时，如何触发 Spotify 播放按钮播放？
】当我单击触发它显示的链接时，如何触发Spotify播放按钮播放？【英文标题】：HowcanItriggertheSpotifyPlaybuttontoplaywhenIclickalinkthattriggersittodisplay?【发布时间】：2012-11-2812:18:33【问题描述】：这是当我单击“摇滚！”链接时显示Spotify... 查看详情