CODEWITHSUNDEEP
angularjschargify
Mike Cantrell
Mike Cantrell

Reputation: 726

AngularJS form validation when action attribute exists

I'm using AngularJS and have a vendor who I need to POST data to. Upon submission, they redirect the user back to my site.

<form method="post" action="https://api.chargify.com/api/v2/signups">
  <input type="hidden" name="secure[api_id]"    value="1234" />
  <input type="hidden" name="secure[timestamp]" value="1301148971" />
  <input type="hidden" name="secure[nonce]"     value="5b2763d0-39e1-012e-858d-64b9e8d3946e" />
  <input type="hidden" name="secure[data]"      value="one=uno&amp;two=dos" />
  <input type="hidden" name="secure[signature]" value="412951d095ebbb3800dfb2126fe5073d2ab6c260" />
</form>

See Chargify Direct Signups for more info

They don't have CORS setup so I cannot use the $http service to post the data. It seems that I have to do this with an old-school form. I'm running into issues with angular validation and prevention of the form submission. Apparently angular ignores the result of the ng-submit when an action attribute is present.

Additionally it prevents the default action (which for form means sending the request to the server and reloading the current page), but only if the form does not contain action, data-action, or x-action attributes.

The validations are too complex for HTML5 browser validation so I really need access to prevent the form submission if the data is invalid. I'm kinda stuck on this. This seems like it should be an easy problem to solve but a decent solution has evaded me thus far. Has anyone else solved this problem or am I missing something obvious?

I've made a verify simplified plunker to demonstrate the issue:

http://plnkr.co/edit/p83VEFwJVbRjOoggfNpb?p=preview

Upvotes: 2

Views: 234

Answers (1)

Mike Cantrell
Mike Cantrell

Reputation: 726

This feels a little hacky but I've sprinkled a little jQuery on it until I can find a more AngularJS solution:

  $("#billingForm").submit(function(e){
    var valid = $scope.billingForm.$valid;
    if (valid) {
      return true;
    }
    else {
      e.preventDefault();
      return false;
    }
  });

Upvotes: 0

Related Questions