CODEWITHSUNDEEP
validationangularjstwitter-bootstrap-3
J86
J86

Reputation: 15307

AngularJS Slightly Advanced Validation / Bootstrap3 Style

I am in the process of learning AngularJS, still at the most basic stages of form validation. I followed the official tutorial here, and managed to get the validation working like they have, where if input is invalid, the background changes colour.

Bootstrap Style Form

That is all nice and counts as an important step in my learning, but how do I move a little further and have the validation add / remove CSS classes required by Bootstrap to show visual cues?

Here is my HTML code:

<form novalidate class="css-form">
  <div class="form-group">
    <label class="control-label" for="fname">First Name</label>
    <input type="text" id="fname" placeholder="First Name" class="form-control" ng-model="user.fname" required >
  </div>
  <div class="form-group">
    <label class="control-label" for="lname">Last Name</label>
    <input type="text" id="lname" placeholder="Last Name" class="form-control" ng-model="user.lname" required >
  </div>
  <div class="form-group">
    <label class="control-label" for="email">Email</label>
    <input type="email" id="email" placeholder="Email" class="form-control" ng-model="user.email" required >
  </div>
  <div class="form-group">
    <label class="control-label" for="password">Password</label>
    <input type="password" id="password" placeholder="Password" class="form-control" ng-model="user.password" required >
  </div>
  <div class="form-group">
    <label class="control-label" for="emailpref">Want annoying emails?</label>
    <select class="form-control" ng-model="user.emailpref" required>
      <option value="Null">Please Select</option>
      <option value="Yes">Yes</option>
      <option value="No">No</option>
    </select>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

In the Bootstrap3 documentation, it says that if I need to show a valid state, I must add a CSS class of has-success like so:

<div class="form-group has-success">
    <label class="control-label" for="fname">First Name</label>
    <input type="text" id="fname" placeholder="First Name" class="form-control" ng-model="user.fname" required >
</div>

How can I get my AngularJS validation to do that? At the moment, my AngularJS is as follows:

function UserCtrl($scope) {
    $scope.master = {};
    $scope.user   = { fname: "J", lname: "Watson", password: "test", email: "[email protected]", emailpref: "Yes" };

    $scope.update = function(user) {
        $scope.master = angular.copy(user);
    };

    $scope.reset = function() {
        $scope.user = angular.copy($scope.master);
    };

    $scope.reset();
}

Upvotes: 1

Views: 2472

Answers (2)

Jakobovski
Jakobovski

Reputation: 3400

You can use angular-validator.

Disclaimer: I am the author of angular-validator

Upvotes: 0

Chandermani
Chandermani

Reputation: 42669

To add dynamic classes based on field validation you need to do two things

Give your form a name

 `<form novalidate class="css-form" name="form1">`

Give each input field a name too. You can then use expression to determine state of error of a field

<div class="form-group has-success" ng-class="{'has-success':form1.fname.$invalid}">
    <label class="control-label" for="fname">First Name</label>
    <input type="text" id="fname" placeholder="First Name" class="form-control" ng-model="user.fname" required name="fname">
</div>

Please go through the form guide http://docs.angularjs.org/guide/forms for more details.

Upvotes: 1

Related Questions