How to Show Red Border at Invalid Input Box After Clicking Submit Button with Angularjs

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

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.

AngularJS and Bootstrap: Red border on invalid input field on submit

The first thing you were missing was adding ng-model='name' to input field, then only will the form become invalid once you click submit, otherwise the form will always be valid since it considers that there is no field present.

Then I'd add the submitted class on the submit click button, then put the border css like .submitted would be the parent and .ng-invalid would be the child so we can put the style on .submitted .ng-invalid

HTML

<div ng-controller="MyCtrl">
    <form class="well" name="formTest" ng-class="{'submitted': submitted}" ng-submit="save()" >
        <div class="form-group">
            <label for="name">Name*</label>
            <input type="name" class="form-control" id="name" placeholder="Enter name" ng-model="name" required />
        </div>{{submitted}}
        <button type="submit" class="btn btn-default" ng-click="submitted= true;">Submit</button>
    </form>
</div>

CSS

.submitted .ng-invalid{
    border: 1px solid red;
}

Working Fiddle

Hope this could help you, Thanks.

how to show red border in input field on button In angular js

Declare a variable $scope.isSubmitClicked=false; in scope and make it true in submit()

$scope.isSubmitClicked = false;
$scope.submit = function ($event) {           
    $scope.isSubmitClicked = true;
};

Then

<input type="text" name="{{key}}" class="form-control" ng-model="value.value" ng-required="value.required && isSubmitClicked">

Show red border for all invalid fields after submitting form angularjs

Reference article: Show red color border for invalid input fields angualrjs

I used ng-class on all input fields.like below

<input type="text" ng-class="{submitted:newEmployee.submitted}" placeholder="First Name" data-ng-model="model.firstName" id="FirstName" name="FirstName" required/>

when I click on save button I am changing newEmployee.submitted value to true(you can check it in my question). So when I click on save, a class named submitted gets added to all input fields(there are some other classes initially added by angularjs).

So now my input field contains classes like this

class="ng-pristine ng-invalid submitted"

now I am using below css code to show red border on all invalid input fields(after submitting the form)

input.submitted.ng-invalid
{
  border:1px solid #f00;
}

Thank you !!

Update:

We can add the ng-class at the form element instead of applying it to all input elements. So if the form is submitted, a new class(submitted) gets added to the form element. Then we can select all the invalid input fields using the below selector

form.submitted .ng-invalid
{
    border:1px solid #f00;
}

Want to make border color red when input is invalid

You can get the error state by:

By styling your error state you can set an ngClass which takes an expression to set the class:

formControls.controls.option1.isValid

Apply this boolean to your selector:

<input [ngClass]="{'input-error': formControls.controls.option1.isValid} placeholder="Optie 1" formControlName="option1" type="text" class="form-control">

In your .scss/.css you can then apply your styles to the class .input-error like:

.input-error {
    border: red 1px solid;
}

how to show red order when field is required in angularjs

Since you're already using a form element, you'll get the features provided by the form directive provided by AngularJS. It's simply a matter of hooking up the validation.

Specifically, the HTML change required to get what you want:

<div class="form-group" ng-class="{'has-error': myform[key].$invalid}">
    <input type="text" name="{{key}}" class="form-control" ng-model="value.value" ng-required="value.required">
</div>

A few points with the suggestion here:

• You appear to be using Bootstrap 3.3, in which case the framework already provides accessible error state validation styling (i.e. notice the form-group has-error combination). There's no need to define a separate red border CSS class, unless you really want to. See here for more details.
• Each input field requiring validation should define the name attribute
• The validation state of each input field is available via the form controller (i.e. myform)

Here's a forked version of your Plunker with the above suggestions.

Edit

In response to the further commentary, the changes you'll need to do that:

• Move the submit button underneath the form element
• Apply novalidate on the form element to suppress native browser validation
• Extend the ng-class condition to involve the $touched and $submitted properties

Updated Plunker fork.

how can i can the border-color of input field on error or invalid using angular js ??

 angular.module('formExample', [])   .controller('FormController', ['$scope',     function($scope) {       $scope.userType = 'guest';     }   ]);

.my-form {  -webkit-transition: all linear 0.5s;  transition: all linear 0.5s;  background: transparent;}.my-form.ng-invalid {  background: white;}.my-input.ng-invalid {  border-color: red;}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js"></script><div ng-app="formExample">  <form name="myForm" ng-controller="FormController" class="my-form">    userType:    <input name="input" ng-model="userType" required class="my-input">    <span class="error" ng-show="myForm.input.$error.required">Required!</span>    <br>    <code>userType = {{userType}}</code>    <br>    <code>myForm.input.$valid = {{myForm.input.$valid}}</code>    <br>    <code>myForm.input.$error = {{myForm.input.$error}}</code>    <br>    <code>myForm.$valid = {{myForm.$valid}}</code>    <br>    <code>myForm.$error.required = {{!!myForm.$error.required}}</code>    <br>  </form></div>

how to turn border color red if input is not valid only when clicked outside of the input field but not at the time of filling the textbox.?

The two things you need when validating a field is to make sure the input has all the following attributes:

1. type, ng-model, name, is a part of a form, class to be added on
   
   error/success
   also:
2. correct path for the built in validation to work.

Always going to be:

nameOfTheForm.nameOfTheInput.$error.typeOfInput

Here is valid and touched in your case:

(nameOfTheForm.nameOfTheInput.$valid.typeOfInput && nameOfTheForm.nameOfTheInput.$touched)

Angular Docs for forms- look at Custom model update triggers and Custom Validation

Here is an example:

function exampleController($scope) {  $scope.email = '';}
angular  .module('example', [])  .controller('exampleController', exampleController);

.error {  border: 1px solid red;}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script><div class="container-fluid" ng-app="example">  <div class="container" ng-controller="exampleController">    <form name=example>      <input              type="email"              name="email"             placeholder="type to get started"             ng-model="email"              ng-focus="example.email.$setUntouched()"             ng-class="{'error': example.email.$error.email}"              ng-model-options="{ updateOn: 'blur' }"/>      <p ng-show="example.email.$valid && example.email.$touched">All good here!!!</p>      <p ng-show="example.email.$error.email && example.email.$touched">Now error is show! :)</p>    </form>  </div></div>

How to set the red border of invalid p-inputNumber PrimeNg form component via CSS?

in global style file add these style rule

.ui-inputtext.ng-dirty.ng-invalid , .ui-inputtext.ng-touched.ng-invalid{
    border: 1px solid red !important;
    background: rgba(255, 0, 0, 0.35);
    box-shadow: 0 0 5px 1px rgba(255, 0, 0, 0.2) inset !important;
}

updated ⭐

in case we use p-inputnumber component

p-inputnumber.ng-dirty.ng-invalid .ui-inputtext , 
p-inputnumber.ng-touched.ng-invalid .ui-inputtext {
    border: 1px solid red !important;
    background: rgba(255, 0, 0, 0.35);
    box-shadow: 0 0 5px 1px rgba(255, 0, 0, 0.2) inset !important;
}

the ng-touched not added even when you enter and leave it that seem an error from the component itself ‍/p>

demo /p>

---

Related Topics