how to show validation messages when form is submitted in angular js

Question

I have form in which there are couple of text fields and an email field. I want to validate all fields for required / mandatory validation. I want to validate email field for email format validation. I want to carry out validation only when I click on two buttons and show the validation messages at top of the page. I know that I can check for email and required validations on field and using ng-show and a flag I can show messages. However I want to check each field's value in a directive and then set the flag to true which will make the message appear.

Here is my HTML. this gets loaded why state provider in main page which also defines following template and a controller for it. so its just a view partial:

          <form name="myForm">
             <div ng-show="validationFailed">
               <!-- here i want to display validation messages using cca.validationMsgs object --> 
            </div>   
             <input type="text" name="test" ng-model="cca.field1" require />
             ....
              <input type="email" mg-model="cca.field2" />
             <input type="button" name="mybutton" /> 
          </form>

Now the controller defined in another JS file:

         'use strict';
         (function(){
                 angular.module('store', []);
                 app.controller("StoreController",function(){
                 var cca = this;
                 cca.validationMsgs = {}; 
                 cca.validationFailed = false; //this flag should decide whether validation messages should be displayed on html page or not.when its true they are shown.
                ...//other mapped fields
            });

And here is unfinished directive which I want to define and write my logic. Logic will be something like this : 1) iterate all elements which have require set on them and check their $validators object / $error.required object is set 2) if yes set validationFailed flag to true,add the validation message to validationMsgs object and break the loop. 3) check if email type field has $error.email object set and if yes similarly set validationFailed flag to true and add corresponding message to the object. Not sure if I really need a directive for this. I would like to apply the directive inside a element.

  app.directive("requireOnSubmit",function(){
         var directiveDefinitionObject = {
              restrict:'E',
               //.... need to fill in 
               //I can use link funcion but not sure how to map
               // validationMsgs and validationFailed objects in here.   
          };
         return directiveDefinitionObject;
  });

Answer 1

Without any code or use case to go after I'll just show you a generic way of validating input. I'm going to use a signup functionality as an example.

Create a service/factory which will carry out the validation and return a promise, if the validation fails it will reject the promise. If not, it will resolve it.

Important note: A promise can only be resolved once (to either be fulfilled or rejected), meaning that the first declaration of a resolve or reject will always "win", which means you can't override any resolve or reject. So in this example if a field is empty and a user's email is undefined, the error message will be All fields must be filled in and not Invalid email format.

auth.factory('validation', ['$q', function($q) {
  return {
    validateSignup: function(newUser) {

      var q = $q.defer();

      for (var info in newUser) {
        if (newUser[info] === '') {
          q.reject('All fields must be filled in');
        }
      }

      if (newUser.email === undefined) {
        q.reject('Invalid email format');
      }
      else if (newUser.password.length < 8) {
        q.reject('The password is too short');
      }
      else if (newUser.password != newUser.confirmedPass) {
        q.reject('The passwords do not match');
      }

      q.resolve(true);

      return q.promise;
    }
  }
}]);

And then inject this into your controller

auth.controller('AuthCtrl', ['$scope', '$location', 'validation', function($scope, $location, validation) {

  $scope.status = {
    message: ''
  }

    // Make sure nothing is undefined or validation will throw error
    $scope.newUser = {
      email: '',
      password: '',
      confirmedPass: ''
    }

    $scope.register = function() {

      // Validation message will be set to status.message
      // This will also clear the message for each request
      $scope.status = {
        message: ''
      }

      validation.validateSignup($scope.newUser)
        .catch(function(err) {

          // The validation didn't go through,
          // display the error to the user
          $scope.status.message = err;
        })
        .then(function(status) {

          // If validation goes through
          if (status === true) {

            // Do something
          }
      });
    }

And in the HTML you can have something like this:

<form>
  <div>
    <label for="email">Email:</label>
    <input type="email" id="email" ng-model="newUser.email">
  </div>
  <div>
    <label for="password">Password:</label>
    <input type="password" id="confirm-pass" ng-model="newUser.password">
  </div>
  <div>
    <label for="confirm-pass">Confirm password:</label>
    <input type="password" id="confirm-pass" ng-model="newUser.confirmedPass">
  </div>
  <div>
    <div>
      <span ng-bind="status.message"></span>
    </div>
  </div>
  <div>
    <button ng-click="register(newUser)">Register</button>
  </div>
</form>

You can use this example and modify it for your use case.