Form validation clears all fields if false

Question

I have a simple form validation function for my form which consists of two text fields and two dropdown fields. It will alert me if I do not fill out a field, but it deletes the information from all other fields, and still submits the form. How can I fix this issue? I know it is probably something to do with the ng-click function in my form submit button but I have not been able to find a solution.

(1) controller in javascript file

function initMap(data) {
  var uluru = {lat: 29.643220, lng: -82.350427};
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 14,
    center: uluru
  });
  // Marker Images
  var image = 'https://image.ibb.co/nmGCo5/Spot3.png';
  var image3 = 'http://www.poolcleaningfl.com/wp-content/uploads/2014/11/map_icon.png';

  placeMarker(data, map);
}

function mainController($scope, $http) {
  $scope.formData = {};

  $http.get('/api/events')
    .success(function(data) {
      $scope.events = data;
      initMap(data);
      for(i = 0; i < data.length; i++) {
        console.log(data[i].eventLocation);
      }
    })
    .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);
      });
  };

  // if a field is left empty, sent alert, return false
  $scope.validateForm = function() {
    if (!$scope.formData.eventName) {
      alert("Please give your event a name!");
      return false;
    }
    else if (!$scope.formData.eventType) {
      alert("Please choose an event type!");
      return false;
    }
    else if (!$scope.formData.eventLocation) {
      alert("Please choose a location!");
      return false;
    }
    else if (!$scope.formData.eventDetails) {
      alert("Please include some details about your event!");
      return false;
    }
    return true;
  }
}

(2) Form in html file

<!-- Event form -->
          <div class="col-md-6">
            <form name="myFor" ng-submit="validateForm()">
              <!-- Event name -->
              <div class="form-group">
                <label class="styleone">Event Name</label>
                <input type="text" class="form-control" ng-model="formData.eventName" placeholder="Event name">
              </div>
              <!-- Event type -->
              <div class="form-group">
               <label class="styleone">Type</label>
               <select class="form-control selectpicker" ng-model="formData.eventType">
                 <option>Type 1</option>
                 <option>Type 2</option>
                 <option>Type 3</option>
               </select>
              </div>
              <!-- Event location -->
              <div class="form-group">
               <label class="styleone">Location</label>
               <select class="form-control selectpicker" data-live-search="true" ng-model="formData.eventLocation">
                 <option>Option 1</option>
                 <option>Option 2</option>
                 <option>Option 3</option>
               </select>
              </div>
              <!-- Event details -->
              <div class="form-group">
               <label class="styleone">Event Details</label>
               <textarea class="form-control" ng-model="formData.eventDetails" rows="2" placeholder="Add details about your event"></textarea>
              </div>
              <div class="text-center">
                <button class="btn btn-info"  ng-click="createEvent()">Submit</button>
              </div>
            </form>

Nitin Walia · Answer 1 · 2017-04-18T17:34:41.530

1

well you can do this.. HTML Code change submit button to this

      <div class="text-center">
        <button class="btn btn-info"  type="submit">Submit</button>
      </div>

JS function call create event function whenvalidateForm is true

$scope.validateForm = function() {
    if (!$scope.formData.eventName) {
      alert("Please give your event a name!");
      return false;
    }
    else if (!$scope.formData.eventType) {
      alert("Please choose an event type!");
      return false;
    }
    else if (!$scope.formData.eventLocation) {
      alert("Please choose a location!");
      return false;
    }
    else if (!$scope.formData.eventDetails) {
      alert("Please include some details about your event!");
      return false;
    }
    $scope.createEvent();
  }

Try this and let me know if it works..

////////EDIT 2///////////////////////

$scope.createEvent = function() {
  if($scope.validatForm()){
    $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);
      });
   }
};

Something like this..

edited Apr 18 '17 at 17:34

answered Apr 18 '17 at 17:24

Nitin Walia

423
2
9

The problem is, i need that ng-click="createEvent()" because it is tied to my controller which adds a marker to a map. Your solution of type=submit breaks my code and does not add any markers to the map – user2990 Apr 18 '17 at 17:28
you can do other way around. remove ng-submit from the form and call validateForm in the begin of createEvent(); check i have edited my answer also remove ng-submit from the form. – Nitin Walia Apr 18 '17 at 17:31
remove ng-submit from the
line? or the line?
– user2990 Apr 18 '17 at 17:41
Oh I understand now. That works perfectly! Thank you for your help! – user2990 Apr 18 '17 at 17:44
actually I spoke too soon. Now if I fill out the form completely, it does not add a pin therefore the call to $scope.createEvent isn't working in some way – user2990 Apr 18 '17 at 18:03
can you show me how your validateForm looks after you made those changes – Nitin Walia Apr 18 '17 at 19:07

Form validation clears all fields if false

1 Answers1