Angularjs - form validation

Question

im trying to validate my users inputs and it works greate that the user can press the submit btn and it errors the input fields that is missing so the user know what input he is missing.

My problem is that it only works when i remove action="/buy" method="post" but i need it to normal submit the form when there is no errors.

How can i do that?

Im using this form validation with angularjs validate http://www.brentmckendrick.com/code/xtform/

<form name="userForm" ng-submit="submitForm(userForm.$valid)" xt-form novalidate>

<div class="col-sm-6" ng-class="{ 'has-error' : userForm.fornavn.$invalid && !userForm.fornavn.$pristine }">
<label class="control-label" for="textinput">Fornavn <span class="star-color">*</span></label>
<input autocomplete="off" type="text" value="<?php echo set_value('fornavn'); ?>" name="fornavn" ng-model="fornavn" class="form-control" xt-validate required>
</div>

<button  id="membership-box__payBtn" type="submit" name="betaling" class="btn btn-success text-uppercase">Go to payment</button>


</form>

Answer 1

Well you can use the $http service to send any type of request to server. When you actually do form post data is posted with content-type:'application/x-www-form-urlencoded'.

For your request if you can set the correct content-type and encode the object to send correctly, it would work. See this fiddle i created earlier that sends data to server as standard form post.

http://jsfiddle.net/cmyworld/doLhmgL6/

The relevant $http request looks like

$scope.update = function (user) {
        $http({
            method: 'POST',
            url: 'https://mytestserver.com/that/does/not/exists',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
            },
            transformRequest: function (data) {
                var postData = [];
                for (var prop in data)
                postData.push(encodeURIComponent(prop) + "=" + encodeURIComponent(data[prop]));
                return postData.join("&");
            },
            data: user
        });

Answer 2

You can model your input fields, and delegate each field to your model as:

<form name="userForm" ng-submit="submitForm(userForm.$valid)" xt-form novalidate>

  <div class="col-sm-6" ng-class="{ 'has-error' : userForm.fornavn.$invalid && !userForm.fornavn.$pristine }">
      <input autocomplete="off" type="text" name="fornavn" ng-model="fornavn.input1" class="form-control" xt-validate required>
   </div>
   <div class="col-sm-6" ng-class="{ 'has-error' : userForm.fornavn2.$invalid && !userForm.fornavn2.$pristine }">
      <input autocomplete="off" type="text" name="fornavn2" ng-model="fornavn.input2" class="form-control" xt-validate required>
   </div>
   <div class="col-sm-6" ng-class="{ 'has-error' : userForm.fornavn3.$invalid && !userForm.fornavn3.$pristine }">
      <input autocomplete="off" type="text" name="fornavn3" ng-model="fornavn.input3" class="form-control" xt-validate required>
  </div>
  <button  id="membership-box__payBtn" type="submit" name="betaling" class="btn btn-success text-uppercase">Go to payment</button>
</form>

And in your controller, send data using $http as:

    var baseUrl=<yourBaseUrl>;
    var url = baseUrl+'/buy';
    var data = $scope.fornavn;

    if(!$scope.userForm.$invalid){
      $http.post(url, data).
        success(function(data) {
          if (data.error_msg) {
              alert(data.error_msg);
          }else{
              alert("Successful! ");
          }
        }).
        error(function(data) {
          alert('error');
        });
      }