title: Angular validation on submit
body: <p>I am trying to create a form that, if you do not fill out any of the fields, will show an alert message if you hit submit. I am trying to work with angular validation to make this happen; however, it is not working at all. Here is the code I currently have: </p>
  
  <p>(1) HTML Event Form file</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>  function mainController($scope, $http) {
        $scope.formData = {};
  
        $http.get('/api/events')
          .success(function(data) {
            $scope.events = data;
            initMap(data);
            for(i = 0; i &lt; data.length; i++){
              console.log(data[i].eventLocation);
              //placeMarker(data[i]);
              //test(data);
            }
            //placeMarker(data);
          })
          .error(function(data) {
            console.log('Error: ' + data);
          });
  
        // when submitting the add form, send the text to the node API
        $scope.createEvent = function() {
          $http.post('/api/events', $scope.formData)
            .success(function(data) {
              $scope.formData = {}; // clear the form so our user is ready to enter another
              $scope.events = data;
              console.log(data);
            })
            .error(function(data) {
              console.log('Error: ' + data);
            });
          }
  
        // ATTEMPT AT FORM VALIDATION
        $scope.validateForm = function() {
          if (document.getElementById("inputName").value == "" || document.getElementById("inputType").value == "" || document.getElementById("inputLocation").value == "" || document.getElementById("inputDetails").value == "") {
            alert("Please fill in all required fields!");
            return false;
          }
        }
      };</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"&gt;&lt;/script&gt;
  &lt;div class="col-lg-6"&gt;
                    &lt;!-- Validate form --&gt;
                    &lt;form name="myForm" onsubmit="return validateForm()"&gt;
                     &lt;div class="form-group"&gt;
                        
                        &lt;label&gt;Event Name&lt;/label&gt;
                        &lt;input type="text" name="inputName" class="form-control" ng-model="formData.eventName" placeholder="Event name"&gt;
                      &lt;/div&gt;
  
                       &lt;div class="form-group"&gt;
                         &lt;label&gt;Type&lt;/label&gt;
                         &lt;select class="form-control" id="inputType" ng-model="formData.eventType"&gt;
                           &lt;option&gt;Option 1&lt;/option&gt;
                           &lt;option&gt;Option 2&lt;/option&gt;
                           &lt;option&gt;Option 3&lt;/option&gt;
                           &lt;option&gt;Option 4&lt;/option&gt;
                         &lt;/select&gt;
                       &lt;/div&gt;
  
                       &lt;div class="form-group"&gt;
                         &lt;label&gt;Location&lt;/label&gt;
                         &lt;select class="form-control" id="inputLocation" ng-model="formData.eventLocation"&gt;
                           &lt;option&gt;Location 1&lt;/option&gt;
                           &lt;option&gt;Location 2&lt;/option&gt;
                           &lt;option&gt;Location 3&lt;/option&gt;
                         &lt;/select&gt;
                       &lt;/div&gt;
  
                       &lt;div class="form-group"&gt;
                         &lt;label&gt;Event Details&lt;/label&gt;
                         &lt;textarea class="form-control" name="inputDetails" ng-model="formData.eventDetails" rows="2" placeholder="Add details about your event"&gt;&lt;/textarea&gt;
                       &lt;/div&gt;
                      &lt;div class="text-center"&gt;
                        &lt;button id="add-event"type="submit" class="btn btn-primary"  ng-click="createEvent()"&gt;Submit&lt;/button&gt;
                      &lt;/div&gt;
                    &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>