Javascript Angularjs-表单验证

我试图验证我的用户输入，它工作得很好，用户可以按提交btn，它错误的输入字段丢失，所以用户知道他丢失了什么输入

我的问题是，它只在我删除

action=“/buy”method=“post”

时起作用，但我需要它在没有错误时正常提交表单

我该怎么做

我将此表单验证与angularjs验证一起使用

福纳文*
您可以使用
$http
服务向服务器发送任何类型的请求。当您实际执行表单发布时，数据以内容类型发布：“application/x-www-form-urlencoded”

对于您的请求，如果您可以设置正确的内容类型并对要发送的对象进行编码，那么它将正常工作。请看我前面创建的这个小提琴，它将数据作为标准表单post发送到服务器


相关的$http请求如下所示

$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
        });

可以对输入字段进行建模，并将每个字段委托给模型，如下所示：

<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>


付款

在控制器中，使用以下方式发送数据：

var baseUrl=；
var url=baseUrl+'/buy'；
var data=$scope.fornavn；
if（！$scope.userForm.$invalid）{
$http.post（url、数据）。
成功（功能（数据）{
如果（数据错误消息）{
警报（数据错误消息）；
}否则{
警报（“成功！”）；
}
}).
错误（函数（数据）{
警报（“错误”）；
});
}
我不明白。在使用Angular的单页应用程序构建中，所有提交都使用AJAX完成。你为什么要定期提交？这是因为我在另一个需要提交的系统上构建angularjs好主意！我会试试的！。我也需要transformRequest函数吗？form POST上发送的数据格式不同于JSON。所以transformRequest也在做同样的事情。它获取数据对象并将其转换为x-www-form-urlencoded格式。
<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>

    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');
        });
      }