CODEWITHSUNDEEP
formsvalidationangularjs
Ranadheer Reddy
Ranadheer Reddy

Reputation: 4324

Show red border for all invalid fields after submitting form angularjs

I have a form in which I have some input fields. Some of them are required fields and some are email fields.

I am using HTML5 required attribute for required fields and type="email" attribute for email fields.

My question is after clicking on submit button i have to show red border for all the invalid fields.

This is my form:

<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>

and my save function.

$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;
    }
};
 })

Now, when i click on save button without filling anything all the errors(spans) are getting displayed. But i want to show red border for all the invalid fields.

I have tried following cases:

input.ng-dirty.ng-invalid{border:1px solid black;}

but this fails when a user click on submit button directly.(without touching input fields)

input.ng-invalid{border:1px solid black;}

this shows the red border as soon as user opens a signup form.

Please help.

Upvotes: 41

Views: 148815

Answers (3)

Ranadheer Reddy
Ranadheer Reddy

Reputation: 4324

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;
}

Upvotes: 47

Alex Zaporozhets
Alex Zaporozhets

Reputation: 193

you can use default ng-submitted is set if the form was submitted.

https://docs.angularjs.org/api/ng/directive/form

example: http://jsbin.com/cowufugusu/1/

Upvotes: 11

Adam
Adam

Reputation: 5246

I have created a working CodePen example to demonstrate how you might accomplish your goals.

I added ng-click to the <form> and removed the logic from your button:

<form name="addRelation" data-ng-click="save(model)">
...
<input class="btn" type="submit" value="SAVE" />

Here's the updated template:

<section ng-app="app" ng-controller="MainCtrl">
  <form class="well" name="addRelation" data-ng-click="save(model)">
    <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.$invalid">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.$invalid">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>
    <span class="text-error" data-ng-show="addRelation.submitted && addRelation.Email.$error.email">Email address is not valid</span><br/>
    <input class="btn" type="submit" value="SAVE" />  
  </form>
</section>

and controller code:

app.controller('MainCtrl', function($scope) {  
  $scope.save = function(model) {
    $scope.addRelation.submitted = true;

    if($scope.addRelation.$valid) {
      // submit to db
      console.log(model); 
    } else {
      console.log('Errors in form data');
    }
  };
});

I hope this helps.

Upvotes: 6

Related Questions