在使用angularjs单击Submit按钮后，如何在无效输入框上显示红色边框 [英] How to show red border at Invalid Input Box after clicking Submit button with angularjs

问题描述

我正在尝试使用angularjs进行表单验证.我仍然可以管理它.现在，我试图在输入框无效时在输入框添加一个红色边框.我可以通过添加以下CSS来做到这一点:

I'm trying to make a form validation using angularjs. I could manage it anyway. Now, I'm trying to add a red border at input box when it's invalid. I can do this by adding this css:

/*Show red border if kept the input empty after touching*/
.ng-touched.ng-invalid-required {
    border-color: red;
}
/* Show red border when stuff has been typed in, but its invalid */
.ng-dirty.ng-invalid {
  border-color: red;
}
/*Show normal border color when typed in for the first time*/
.ng-untouched.ng-invalid {
    border-color: #ccc; 
}

但是，在第一次输入框为空且未触及的情况下，那时如果有人单击提交"按钮，则会显示错误消息，但不会显示任何红色边框:

But, at the first time if any input box is empty and untouched and at that time if anybody click 'Submit' button, it'll show error message but it don't show any red border:

我不知道在这种情况下应该在CSS中定义哪个类.如果有人单击提交"按钮使输入框为空且保持不变，如何使输入框变成红色边框?

I don't understand which class I should define in CSS for this scenario. How can I make the input box red bordered if anybody click the 'Submit' button keeping input box empty and untouched?

这是pl弹的作品.

推荐答案

在CSS中使用ng-submitted

/*Show red border if kept the input empty after touching*/
.ng-touched.ng-invalid-required {
    border-color: red;
}
/* Show red border when stuff has been typed in, but its invalid */
.ng-dirty.ng-invalid {
  border-color: red;
}
/*Show normal border color when typed in for the first time*/
.ng-untouched.ng-invalid {
    border-color: #ccc; 
}
.ng-submitted input.ng-invalid{
    border-color: red;
}

正在工作的Plunkr

希望这可以为您提供帮助.谢谢.

Hope this could help you. Thanks.

这篇关于在使用angularjs单击Submit按钮后，如何在无效输入框上显示红色边框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！