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

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

javascript angularjs

Javascript Angularjs验证在提交按钮上不起作用,javascript,angularjs,Javascript,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" place

嗨，我是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>

为什么不工作，请说清楚，按钮未禁用或表格未提交？我认为您应该只使用一个

ng submit

或

ng click

进行提交，因为没有两个提交按钮。做一个简单的扣子谢谢你。我删除了一个提交按钮。我的表格正在提交。但如果验证失败，它应该提交。如果验证失败，是否要提交？然后删除验证在禁用ng的条件中放入正确的括号：（form.worksubstreet.$dirty&&form.worksubstreet.$invalid）| |（form.workmainstreet.$dirty&&form.workmainstreet.$invalid）非常感谢。我正在检查。ng click=“RegisterUser（）”这不是必需的吗？我不会将ng click放在提交按钮上，这会变得很难遵循。您在表单标记中指向ng submit中的submit（）方法。最好在submit（）方法内部执行RegisterUser（）。它使代码更易于遵循，但更重要的是品味：）而不是形式如果我把div放进去会发生什么？只是问问而已。

angular.module('app', [])
.controller('ctrl', function($scope){

  $scope.submit =function(){
    $scope.RegisterUser();
  }
})