大佬教程收集整理的这篇文章主要介绍了窗体 – 在提交窗体angularjs后,为所有无效字段显示红色边框，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
我对电子邮件字段的必填字段和type =“email”属性使用html5必需属性。
我的问题是在点击提交按钮后，我必须显示所有无效字段的红色边框。
这是我的形式
<form name="addRelation"> <label>First Name</label> <input type="text" placeholder="First Name" data-ng-model="model.firstName" id="FirstName" name="FirstName" required/><br/> <span class="text-error" data-ng-show="addRelation.submitted && addRelation.FirstName.$error.required">first Name is required</span><br/> <label>last name</label> <input type="text" placeholder="last name" data-ng-model="model.lastName" id="LastName" name="LastName" required/><br/> <span class="text-error" data-ng-show="addRelation.submitted && addRelation.LastName.$error.required">last name is required</span><br/> <label>Email</label> <input type="email" placeholder="Email" data-ng-model="model.email" id="Email" name="Email" required/><br/> <span class="text-error" data-ng-show="addRelation.submitted && addRelation.Email.$error.required">Email address is required</span><br/> <span class="text-error" data-ng-show="addRelation.submitted && addRelation.Email.$error.email">Email address is not valid</span><br/> <input class="btn" data-ng-click="save(model)" type="button" value="SAVE" /> </form>
和我的保存功能。
$scope.save= function (model) { if ($scope.addRelation.$valid) { //form is valid- so save it to DB } else { //if form is not valid set $scope.addRelation.submitted to true $scope.addRelation.submitted=true; } }; })
现在，当我点击保存按钮，而不填充任何所有的错误(跨度)被显示。但我想显示红色边框的所有无效字段。
我试过以下情况：
input.ng-dirty.ng-invalid{Border:1px solid black;}
但是当用户直接点击提交按钮时，这会失败(不触摸输入字段)
input.ng-invalid{Border:1px solid black;}
请帮忙。
@H_403_27@我在所有输入字段上使用Ng-class
<input type="text" ng-class="{submitted:newemployee.submitteD}" placeholder="First Name" data-ng-model="model.firstName" id="FirstName" name="FirstName" required/>
当我点击保存按钮我改变newemployee.submitted的值为true(你可以检查它在我的问题)。所以当我点击保存，一个名为submit的类被添加到所有输入字段(还有一些其他类最初由angularjs添加)。
所以现在我的输入字段包含这样的类
class="ng-prisTine ng-invalid submitted"
现在我使用下面的CSS代码显示红色边框所有无效的输入字段(提交表单后)
input.submitted.ng-invalid { border:1px solid #f00; }
谢谢 ！！
更新：
我们可以在表单元素中添加ng-class，而不是将它应用于所有输入元素。因此，如果表单提交，一个新类(提交)被添加到表单元素。然后我们可以使用下面的选择器选择所有无效的输入字段
form.submitted .ng-invalid { border:1px solid #f00; }@H_403_27@
以上是大佬教程为你收集整理的窗体 – 在提交窗体angularjs后,为所有无效字段显示红色边框全部内容，希望文章能够帮你解决窗体 – 在提交窗体angularjs后,为所有无效字段显示红色边框所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
