title: Validate form using angularjs before ajax request
body: <p>I have a simple form like this. I am submitting this form via ajax using angularjs. I want to validate this form before sending ajax request and need to show the error to user. I am a newbie to angular. Please Help me</p>
  
  <p>Here is my code.</p>
  
  <pre><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"&gt;&lt;/script&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-route.js"&gt;&lt;/script&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-messages.js"&gt;&lt;/script&gt;
  &lt;div ng-app="Myapp"&gt;
      &lt;div ng-controller="orderFormController"&gt;
  
          Item :   &lt;input type="text" name="item"  ng-model='item' required&gt; &lt;p&gt;&lt;/p&gt;
       Rate:   &lt;input type="text" name="rate"  ng-model='rate' required&gt; &lt;p&gt;&lt;/p&gt;
  
          &lt;button type="button"  ng-click='saveorder()' &gt;SAVE ORDER&lt;/button&gt;
      &lt;/div&gt;    
      &lt;script&gt;
          var Myapp = angular.module('Myapp', ["ngRoute"]);
          Myapp.controller('orderFormController', ['$scope', '$http', function ($scope, $http) {
  
  
              $scope.saveorder = function () {
  
                   // Validate form here and set the error in form
  
                   $http.post("order/save/", data).success(function (res, status, headers, config) {
                       $scope.message = res;
  
                  }).error(function (data, status) { 
                      $scope.message = res;
                  });
              }
  
          }]);
      &lt;/script&gt;             
  </code></pre>