Angularjs 验证在提交按钮上不起作用

嗨，我是 angularjs 的新手。我正在尝试对必填字段进行简单的验证，如下所示。

<ng-form name="form" ng-submit="submit()">
 <div class="inputblock">
<span class="input-icon"><img src="images/office-icon.png"></span>
<input type="text" class="with-icon" placeholder="Work MainStreet" ng-model="workmainstreet" required="" name="workmainstreet">
<span ng-show="form.$submitted || form.workmainstreet.$touched" class="error-message">
<span style="color:red" ng-show="form.workmainstreet.$error.required">Please Enter Work MainStreet</span>
</span>
</div>
<div class="inputblock">
<span class="input-icon"><img src="images/office-icon.png"></span>
<input type="text" class="with-icon" placeholder="Work SubStreet" ng-model="worksubstreet" required="" name="worksubstreet">
<span ng-show="form.$submitted || form.worksubstreet.$touched" class="error-message">
<span style="color:red" ng-show="form.worksubstreet.$error.required">Please Enter Work SubStreet</span>
</span>
</div>
 <div class="button-container">
<input type="submit" value="Cancel" id="input-cancel">
<input type="submit" ng-disabled="form.worksubstreet.$dirty && form.worksubstreet.$invalid || form.workmainstreet.$dirty && form.workmainstreet.$invalid" ng-click="RegisterUser()" value="Submit" id="input-submit"/>
</div>
</ng-form>

当我单击提交时，我的验证不起作用。如果我单击文本框并单击外部验证正在工作。我可以在这里得到一些帮助来解决这个问题吗？任何帮助将不胜感激。谢谢。

我还会像这样将 novalidate 属性添加到表单中：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body ng-app="app">
  <div ng-controller="ctrl">
    <form novalidate name="form" ng-submit="submit()">
       <div class="inputblock">
      <span class="input-icon"><img src="images/office-icon.png"></span>
      <input type="text" class="with-icon" placeholder="Work MainStreet" ng-model="workmainstreet" required="" name="workmainstreet">
      <span ng-show="form.$submitted || form.workmainstreet.$touched" class="error-message">
      <span style="color:red" ng-show="form.workmainstreet.$error.required">Please Enter Work MainStreet</span>
      </span>
      </div>
      <div class="inputblock">
      <span class="input-icon"><img src="images/office-icon.png"></span>
      <input type="text" class="with-icon" placeholder="Work SubStreet" ng-model="worksubstreet" required="" name="worksubstreet">
      <span ng-show="form.$submitted || form.worksubstreet.$touched" class="error-message">
      <span style="color:red" ng-show="form.worksubstreet.$error.required">Please Enter Work SubStreet</span>
      </span>
      </div>
       <div class="button-container">
      <input type="submit" ng-disabled="form.worksubstreet.$dirty && form.worksubstreet.$invalid || form.workmainstreet.$dirty && form.workmainstreet.$invalid" value="Submit" id="input-submit"/>
      </div>
    </form>
  </div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
</body>
</html>

否则浏览器将接管。
以及与之配套的代码：

angular.module('app', [])
.controller('ctrl', function($scope){
  $scope.submit =function(){
    $scope.RegisterUser();
  }
})

相关内容

最新更新

热门标签：