AngularJS阻止提交如果输入没有't已验证
AngularJS prevent Submit if input hasn't validated
如果输入尚未验证,我将试图阻止表单提交。。
这是我的代码:
html
<form method="post" enctype="multipart/form-data" ng-submit="insertCustomer(insertProfile)" id="form-customer" name="form" class="css-form" novalidate >
<div class="row">
<div class="col-md-7">
<label>Full Name*
<span class="required-label" ng-show="form.$submitted || form.full_name.$touched">
<span ng-show="form.full_name.$error.required">(Full Name is required.)</span>
</span>
</label>
<input type="text" ng-model="insertProfile.full_name" name="full_name" class="form-control" required="" />
</div>
</div>
</form>
<button type="submit" form="form-customer"
class="btn btn-primary pull-right" id="cmd_insert_customer" ng-show="tab == 3">
Insert Customer
</button>
我试过使用ng-submit = "form.$valid && insertCustomer(insertProfile)"
。。。如果输入为空,表单不会提交,但当我输入值时。。。它仍然没有提交。。。
将表单传递给insertCustomer函数,并检查函数的有效性,类似于
<form method="post" enctype="multipart/form-data" ng-submit="insertCustomer(form)" id="form-customer" name="form" class="css-form" novalidate >
<div class="row">
<div class="col-md-7">
<label>Full Name*
<span class="required-label" ng-show="form.$submitted || form.full_name.$touched">
<span ng-show="form.full_name.$error.required">(Full Name is required.)</span>
</span>
</label>
<input type="text" ng-model="insertProfile.full_name" name="full_name" class="form-control" required="" />
</div>
</div>
</form>
<button type="submit" form="form-customer"
class="btn btn-primary pull-right" id="cmd_insert_customer" ng-show="tab == 3">
Insert Customer
</button>
在js中检查像这个
$scope.insertCustomer = function(form){
if(form.$invalid){
return;
}
//form submit code....
}
希望它能起作用。
删除以下内容,因为您将使用Angular方法提交表单。
method="post" enctype="multipart/form-data"
此外,ngSubmit只在某些情况下防止默认行为。
这是一个更好的例子https://plnkr.co/edit/a14f9tLmKN48JCDMMpd0?p=preview
相关文章:
- AngularJS通过指令重新验证提交
- 验证提交表单上的电话格式
- JS表单验证 - 提交按钮不执行任何操作
- 如何将第二个函数绑定到 jQuery 验证提交处理程序
- 提交表单并绕过 jQuery 验证提交处理程序
- JavaScript错误表单验证:提交时清除所有输入字段
- jQuery 验证插件:相同的表单,不同的验证提交处理程序
- 未使用 MVC 4.5 不显眼的验证提交实时数据
- 验证提交到数据库的答案
- j查询选项卡/验证提交多个表单
- Javascript表单验证提交函数
- 简单的javascript表单验证提交不起作用
- 表单没有通过jQuery验证提交
- 使用javascript验证提交的表单
- jQuery验证提交空CkEditor
- 验证&提交表单,重置表单+更改一些CSS样式
- jQuery验证提交表单两次
- Javascript表单验证提交不起作用
- 使用ajax验证提交和保存表单-重要
- 表单验证提交,在提交姓名和城市的输出中首字母大写