CODEWITHSUNDEEP
cssangularjs
user1896653
user1896653

Reputation: 3327

How to show red border at Invalid Input Box after clicking Submit button with angularjs

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:

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?

Here is the plunker work.

Upvotes: 3

Views: 16045

Answers (2)

Pankaj Parkar
Pankaj Parkar

Reputation: 136144

Use nested class inside your css using 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;
}

Working Plunkr

Hope this could help you. Thanks.

Upvotes: 4

Tony
Tony

Reputation: 482

You should change the last css declation to match :

.ng-pristine {
    border-color: red;  
}

EDIT :

To show a red border only after submitting you could use a ng-class attribute with a condition on : createLogin.$submitted

Upvotes: 0

Related Questions