AngularJS validation on html page is not working

Question

I have to create AngularJS project. In this I have one html page name is addNewHost.html

My addNewHost.html code is given below

<md-content class="md-padding" ng-controller="AddNewHostController as vm">
    <form name="hostForm" ng-submit="vm.AddNewHost($event)" novalidate>
        <md-content md-theme="dark" class="md-padding" layout="row" layout-sm="column">
            <md-input-container>
                <label>Hostame</label>
                <input ng-model="vm.service.hostname" required>
            </md-input-container>
            <md-input-container>
                <label>IP Address</label>
                <input ng-model="vm.service.ipaddress" required>
            </md-input-container>
            <md-input-container>
                <label>Alias</label>
                <input ng-model="vm.service.alias" required>
            </md-input-container>
        </md-content>
        <md-content class="md-padding">
            <div layout layout-sm="column">
                <md-input-container flex>
                    <input ng-model="vm.service.check_command" placeholder="Check Command" required>
                </md-input-container>
                <md-input-container flex>
                    <select class="ng-pristine ng-valid md-input ng-empty ng-touched" ng-model="vm.service.notification_period"
                        name="notification_period" required>
                        <option value="">Select notification period</option>
                        <option value="24x7">24x7</option>
                    </select>
                </md-input-container>
                <md-input-container flex>
                    <label>Max check attempts</label>
                    <input ng-model="vm.service.max_check_attempts" required name="max_check_attempts">
                </md-input-container>
            </div>
            <div layout layout-sm="column">
                <md-input-container flex>
                    <select class="ng-pristine ng-valid md-input ng-empty ng-touched" ng-model="vm.service.active_checks_enabled"
                        name="active_checks_enabled" required name="active_checks_enabled">
                        <option value="">Select active checks enabled</option>
                        <option value="1">On</option>
                        <option value="0">Off</option>
                        <option value="2">Skip</option>
                        <option value="3">Null</option>
                    </select>
                </md-input-container>
                <md-input-container flex>
                    <select class="ng-pristine ng-valid md-input ng-empty ng-touched" ng-model="vm.service.passive_checks_enabled"
                        name="passive_checks_enabled" required>
                        <option value="">Select passive checks enabled</option>
                        <option value="1">On</option>
                        <option value="0">Off</option>
                        <option value="2">Skip</option>
                        <option value="3">Null</option>
                    </select>
                </md-input-container>
                <md-input-container flex>
                    <md-checkbox name="chkRegister" ng-model="vm.service.register">Registered</md-checkbox>
                </md-input-container>
            </div>
            <div layout layout-sm="column">
                <md-input-container flex>
                    <input ng-model="vm.service.chIntervalInMinutes" placeholder="Check interval in minutes" required>
                </md-input-container>
                <md-input-container flex>
                    <input ng-model="vm.service.retryIntervalInMinutes" placeholder="Retry interval in minutes" required>
                </md-input-container>
                <md-input-container flex>
                    <select class="ng-pristine ng-valid md-input ng-empty ng-touched" ng-model="vm.service.contact_groups"
                        name="contact_groups" required>
                        <option value="">Select contact groups</option>
                        <option value="admins">admins</option>
                    </select>
                </md-input-container>
            </div>
            <div layout layout-sm="column">
                <md-input-container flex>
                    <select class="ng-pristine ng-valid md-input ng-empty ng-touched" ng-model="vm.service.check_period"
                        name="check_period" style="width:33%;" required>
                        <option value="">Select check period</option>
                        <option value="24x7">24x7</option>
                    </select>
                </md-input-container>
            </div>
            <button class="md-button md-ink-ripple" ng-class="hostForm.$valid ? 'active' : 'disable'" style="background-color:#7ec9c2; height: 12px; margin-top: 3%;">Add Host Service</button>
        </md-content>
    </form>
</md-content>

My AddNewHostController controller code is given below

(function(){
  angular
    .module('app')
    .controller('AddNewHostController', [
      AddNewHostController
    ]);

  function AddNewHostController() {
    var vm = this
    vm.AddNewHost = AddNewHost;

    function AddNewHost() {
      console.log(vm.service);
      if (vm.service == undefined) {
        return false;
      } else {
        console.log(vm.service);
      }
    }
  }
})();

My problem is that

When I click on my Submit Button(Add Host Service) it will execute the controller without checking the validation.

In short my validation is not working.

I have also other issue is that When I click on Submit Button it does not validate my all Dropdownlist.

@federicoscamuzzi I don't want to show html popup. I want that when I click on Submit it will do all empty required textbox and dropdown with red color. — user3441151, Jan 04 '17 at 11:33
why you say pop up??? .. i didn't mentioned it..i suggest to you to remove novalidate directive from your tag ..so do like this: — federico scamuzzi, Jan 04 '17 at 11:34
@federicoscamuzzi If I remove novalidate than it showing me html required popup with required input. Have you got my point? — user3441151, Jan 04 '17 at 11:36

score 0 · Answer 1 · answered Jan 04 '17 at 11:49

Not sure how you are doing it but compare it to the example below.

Here is a working plunk as well. The validation is working fine in the plunk.

Cross check all the versions that you are using.

var app = angular.module('simple', ['ngMaterial']);


app.controller("AddNewHostController", function($scope) {
  $scope.service = {};
});

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css">

  <link rel="stylesheet" href="style.css" />


  <!-- Angular Material requires Angular.js Libraries -->
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>

  <!-- Angular Material Library -->
  <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>
  <script src="app.js"></script>
</head>

<body ng-app="simple">
  <md-content class="md-padding" ng-controller="AddNewHostController as vm">
    <form name="hostForm" ng-submit="vm.AddNewHost($event)" novalidate="">
      <md-content md-theme="dark" class="md-padding" layout="row" layout-sm="column">
        <button class="md-button md-ink-ripple" ng-class="hostForm.$valid ? 'active' : 'disable'" style="background-color:#7ec9c2; height: 12px; margin-top: 3%;">Add Host Service</button>
        <md-input-container>
          <label>Hostame</label>
          <input ng-model="vm.service.hostname" required="" />
        </md-input-container>
        <md-input-container>
          <label>IP Address</label>
          <input ng-model="vm.service.ipaddress" required="" />
        </md-input-container>
        <md-input-container>
          <label>Alias</label>
          <input ng-model="vm.service.alias" required="" />
        </md-input-container>
      </md-content>
      <md-content class="md-padding">
        <div layout="" layout-sm="column">
          <md-input-container flex="">
            <input ng-model="vm.service.check_command" placeholder="Check Command" required="" />
          </md-input-container>
          <md-input-container flex="">
            <select class="ng-pristine ng-valid md-input ng-empty ng-touched" ng-model="vm.service.notification_period" name="notification_period" required="">
              <option value="">Select notification period</option>
              <option value="24x7">24x7</option>
            </select>
          </md-input-container>
          <md-input-container flex="">
            <label>Max check attempts</label>
            <input ng-model="vm.service.max_check_attempts" required="" name="max_check_attempts" />
          </md-input-container>
        </div>
        <div layout="" layout-sm="column">
          <md-input-container flex="">
            <select class="ng-pristine ng-valid md-input ng-empty ng-touched" ng-model="vm.service.active_checks_enabled" name="active_checks_enabled" required="">
              <option value="">Select active checks enabled</option>
              <option value="1">On</option>
              <option value="0">Off</option>
              <option value="2">Skip</option>
              <option value="3">Null</option>
            </select>
          </md-input-container>
          <md-input-container flex="">
            <select class="ng-pristine ng-valid md-input ng-empty ng-touched" ng-model="vm.service.passive_checks_enabled" name="passive_checks_enabled" required="">
              <option value="">Select passive checks enabled</option>
              <option value="1">On</option>
              <option value="0">Off</option>
              <option value="2">Skip</option>
              <option value="3">Null</option>
            </select>
          </md-input-container>
          <md-input-container flex="">
            <md-checkbox name="chkRegister" ng-model="vm.service.register">Registered</md-checkbox>
          </md-input-container>
        </div>
        <div layout="" layout-sm="column">
          <md-input-container flex="">
            <input ng-model="vm.service.chIntervalInMinutes" placeholder="Check interval in minutes" required="" />
          </md-input-container>
          <md-input-container flex="">
            <input ng-model="vm.service.retryIntervalInMinutes" placeholder="Retry interval in minutes" required="" />
          </md-input-container>
          <md-input-container flex="">
            <select class="ng-pristine ng-valid md-input ng-empty ng-touched" ng-model="vm.service.contact_groups" name="contact_groups" required="">
              <option value="">Select contact groups</option>
              <option value="admins">admins</option>
            </select>
          </md-input-container>
        </div>
        <div layout="" layout-sm="column">
          <md-input-container flex="">
            <select class="ng-pristine ng-valid md-input ng-empty ng-touched" ng-model="vm.service.check_period" name="check_period" style="width:33%;" required="">
              <option value="">Select check period</option>
              <option value="24x7">24x7</option>
            </select>
          </md-input-container>
        </div>
      </md-content>
    </form>
  </md-content>
</body>

</html>

score 0 · Accepted Answer · answered Jan 04 '17 at 13:28

0

First, since you are using angular-material, check the error handling example on the official page:

Ensure that you have ngMessages added as a dependency of your project.
Remove the manually added ng-pristine, ng-dirty, ng-valid classes from your HTML markup, those are added automatically by Angular's validation mechanism.
Then check that your inputs can detect invalid values and change their styles accordingly, as shown on the official example.

Once you get that working, the next step is to ensure that you do not enable your submit button unless the form is valid. I see you chose to do that via ng-class, however I recommend that you use the ng-disabled directive as shown here.

<button type="submit" class="md-button md-ink-ripple" ng-disabled="hostForm.$invalid">Add Host Service</button>

Third, you can also add a safety switch inside your controller, as described in the same link above. Therefore, modify your form markup as follows:

<form name="hostForm" ng-submit="vm.AddNewHost(hostForm.$valid)" novalidate>

And your controller method into

function AddNewHost(isDataValid) {
  if (isDataValid) {
    // add your host
  }
}

answered Jan 04 '17 at 13:28

M. F.

1,654
11
16

You are right. That's work for me but I am facing some problem. On my page load I am getting some error on my console "Error: transition superseded at $StateProvider.$get". Can you please help me regarding this? – user3441151 Jan 04 '17 at 13:54
When I click on Submit button my all textbox color is converted into red but my dropdown color is not changing? – user3441151 Jan 04 '17 at 14:04
The `$StateProvider’ error is something totally different and outside the scope of this post. It is related to the use of the UI-Router, you can find some cues [here](http://stackoverflow.com/questions/21868219/state-transition-after-rejected-promise-angular-ui-router). I recommend that you create a new, separate post with details about how UI-Router is used inside your application and when exactly does the error occur. – M. F. Jan 05 '17 at 01:52
For the Submit button, it's a bit unclear what the issue is. Do your textboxes turn red only when they have an invalid value, or regardless of their valid state? – M. F. Jan 05 '17 at 01:56
To ensure that dropdowns show validation errors, they must be both invalid and touched, as described in the [official Angular Material documentation](https://material.angularjs.org/latest/demo/select), Validations section. Your original code should make use of `md-select` instead of the standard select and the placeholder for `ng-messages` should also be added as shown there. – M. F. Jan 05 '17 at 02:07

AngularJS validation on html page is not working

2 Answers2