想要使用Angularjs验证而不是浏览器验证

时间:2016-04-10 18:46:42

标签: javascript angularjs html5 forms validation

我有一个表单,其中包含两个ng-forms,我在验证输入。关于表格,我有两个问题。

1)在输入公司我想验证minlength,但我的方法似乎不起作用。我该如何解决这个问题?

2)我想对我的错误消息使用Angularjs验证,但浏览器会自动显示"此输入无效" AND Internet Explorer根本不验证。我的错在哪里?我已经尝试过nonvalidate和ng-required但是我的表单确实在没有验证的情况下提交。

以下是plunkr链接:Plunkr

提前致谢, YB



var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.billingAdrEqualsShippingAdr = false;
		 
		 $scope.confirmBillingEqualsShipping = true;
		 $scope.changeBillingAddress = false;
		 
		 $scope.shippingAddress = {};
		 $scope.billingAddress = {};

		 $scope.setBillingAddress = function (){
		   $scope.changeBillingAddress = true;
			 $scope.billingAddress = $scope.shippingAddress;
		 };
		 
		 $scope.cancelBillingAddress = function (){
		   $scope.changeBillingAddress = false;
			 $scope.billingAddress = $scope.shippingAddress;
		 };

		 $scope.openCompanyModal = function (company){
			 $scope.billingAddress = company;
			 $scope.shippingAddress = company;
		 };

		$scope.submit = function (){
		  console.log("Form submitted");
		}
});

<!DOCTYPE html>
<html ng-app="plunker">

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <link data-require="bootstrap-css@*" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link rel="stylesheet" href="style.css" />
  <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9"></script>
  <script src="app.js"></script>
</head>

<body ng-controller="MainCtrl">
  <form name="addressForm" ng-submit="submit()">
      <div ng-form="shippingForm">
          <div class="row">
              <div class="col-md-12">
                  <h3 class="form-group">
                      <label>Lieferadresse</label>
                  </h3>
              </div>
          </div>
          <div class="row form-group">
              <div class="col-md-4">
                  <label>Salutation</label>
              </div>
              <div class="col-md-8">
                  <select name="salutation" ng-model="shippingAddress.salutation" class="form-control" ng-change="refreshBillingAddress()" ng-required="true">
                      <option></option>
                      <option value="Herr">Herr</option>
                      <option value="Frau">Frau</option>
                  </select>
                  <span ng-show="submitted && shippingForm.salutation.$error.required"></span>
              </div>
          </div>
          <div class="row form-group">
              <div class="col-md-4">
                  <label>Firsname</label>
              </div>
              <div class="col-md-8">
                  <input type="text" name="prename" ng-model="shippingAddress.prename" ng-required="true" class="form-control" ng-change="refreshBillingAddress()"/>
                  <span ng-show="submitted && shippingForm.prename.$error.required">Required</span>
              </div>
          </div>
          <div class="row form-group">
              <div class="col-md-4">
                  <label>Lastname</label>
              </div>
              <div class="col-md-8">
                  <input type="text" name="surname" ng-model="shippingAddress.surname" required="" class="form-control" ng-change="refreshBillingAddress()"/>
                  <span ng-show="submitted && shippingForm.surname.$error.required">Required</span>
              </div>
          </div>
          <div class="row form-group">
              <div class="col-md-4">
                  <label>Company</label>
              </div>
              <div class="col-md-8">
                  <input type="text" name="company" ng-model="shippingAddress.company" required="" ng-minlength="10" class="form-control" ng-change="refreshBillingAddress()"/>
                  <span ng-show="submitted && shippingForm.company.$error.required">Required</span>
                  <span ng-show="submitted && shippingForm.company.$error.minlength">Minlength = 10</span>
              </div>
          </div>
      </div >
      <div class="row">
          <div class="col-md-12">
              <h3 class="form-group">
                  <label>Rechnungsadresse</label>
                  <div ng-click="setBillingAddress()" ng-show="changeBillingAddress === false" class="btn btn-default pull-right">Ändern</div>
                  <div ng-click="cancelBillingAddress()" ng-show="changeBillingAddress === true" class="btn btn-danger pull-right">Abbrechen</div>
              </h3>
          </div>
          <div ng-show="changeBillingAddress == false" class="row">
              <div class="col-md-offset-1">Identisch mit Lieferadresse</div>
          </div>
      </div>
      <div ng-show="changeBillingAddress == true">
          <div style="margin-top: 5px">
              <div ng-form="billingForm">
                  <div class="row form-group">
                      <div class="col-md-4">
                          <label>Salutation</label>
                      </div>
                      <div class="col-md-8">
                          <select name="salutation" ng-model="billingAddress.salutation" ng-required="changeBillingAddress == true" class="form-control">
                              <option></option>
                              <option value="Herr">Herr</option>
                              <option value="Frau">Frau</option>
                          </select>
                          <span ng-show="submitted" class="help-block">Pflichtfeld</span>
                      </div>
                  </div>
                  <div class="row form-group">
                      <div class="col-md-4">
                          <label>Firstname</label>
                      </div>
                      <div class="col-md-8">
                          <input type="text" name="prename" ng-model="billingAddress.prename" ng-required="changeBillingAddress == true" class="form-control"/>
                          <span ng-show="submitted && billingForm.prename.required" class="help-block">Pflichtfeld</span>
                      </div>
                  </div>
                  <div class="row form-group">
                      <div class="col-md-4">
                          <label>Lastname</label>
                      </div>
                      <div class="col-md-8">
                          <input type="text" name="surname" ng-model="billingAddress.surname" ng-required="changeBillingAddress == true" class="form-control"/>
                          <span ng-show="submitted && billingForm.surname.$error.required"></span>
                      </div>
                  </div>
                  <div class="row form-group">
                      <div class="col-md-4">
                          <label>Company</label>
                      </div>
                      <div class="col-md-8">
                          <input type="text" name="company" ng-model="billingAddress.company" ng-required="changeBillingAddress == true" class="form-control"/>
                          <span ng-show="submitted && billingForm.company.$error.required"></span>
                      </div>
                  </div>
              </div>
          </div>
      </div>
      <div class="row">
          <div style="padding-top: 1em" class="col-md-12">
              <button ng-click="previousTab(0)" class="btn btn-default pull-left">Back</button>
              <button type="submit" class="btn btn-default pull-right">Next</button>
          </div>
      </div>
  </form>
</body>

</html>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:0)

这是你的掠夺者,我纠正了一些部分(直到Rechnungsaddresse):

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

我猜您可以使用<form name="addressForm"...<div ng-form="addressForm" 但两者似乎都有问题。

submitted从未设置,所以我按照我猜你想要的方式添加它