Javascript 提交时AngularJS中的表单验证无效_Javascript_Forms_Validation_Angularjs

Javascript 提交时AngularJS中的表单验证无效

javascript forms validation angularjs

Javascript 提交时AngularJS中的表单验证无效,javascript,forms,validation,angularjs,Javascript,Forms,Validation,Angularjs,我正在尝试验证表单，并在提交表单时的文本字段下显示验证结果，如下所示但我无法在提交时验证输入字段，但我可以验证onBlur，我尝试了两种方法，请参见下面分别用于onSubmit和onBlur的代码我的代码是： formSumbit.html 样板 var app=angular.module（'testapp'，['ngRoute']）； app.controller（'signupController'，['$scope'，函数（$scope）{ $scope.submitted=fal

我正在尝试验证表单，并在提交表单时的文本字段下显示验证结果，如下所示

但我无法在提交时验证输入字段，但我可以验证onBlur，我尝试了两种方法，请参见下面分别用于onSubmit和onBlur的代码

我的代码是：

formSumbit.html


样板
var app=angular.module（'testapp'，['ngRoute']）；
app.controller（'signupController'，['$scope'，函数（$scope）{
$scope.submitted=false；
$scope.signupForm=函数（）{
控制台日志（“hi”）；
if（$scope.signup\u form.$valid）{
//正常提交
}否则{
$scope.signup\u form.submitted=true；
}
}
}]);
.错误{颜色：红色}
名称
你的名字是必需的。
电子邮件地址
您的电子邮件无效
提交

但我可以在“模糊事件”中进行验证。请参阅下面处理onBlur的代码

<!DOCTYPE html>
<html lang="en" ng-app="testapp">
<head>
    <meta charset="utf-8"/>
    <title>BoilerPlate</title>
    <link rel="stylesheet" type="text/css" href="/reset.css"></link>
    <link rel="stylesheet" type="text/css" href="/lib/bootstrap/css/bootstrap.css"></link>


    <script src="/lib/angular/angular.js" ></script>
    <script src="/lib/angular/angular-route.js" ></script>
    <script src="/jquery.min.js" ></script>
    <script src="/lib/bootstrap/js/bootstrap.js" ></script>

    <script>
    var app=angular.module('testapp', ['ngRoute']);
     app.controller('signupController', ['$scope', function($scope) {

    }]);
    </script>
    <style type="text/css">
    .error{color:red}
    </style>

  </head>
  <body>
    <div>
            <form name="signup_form"   novalidate >
                <div class="form-group">
                    <label for="name">Name</label>
                    <input type="text" name="name"  ng-model="testform.name" required class="form-control" id="name" placeholder="Name"/>
                    <div class="error" ng-show="signup_form.name.$dirty && signup_form.name.$error.required">
                        <small class="error">
                            Your name is required.
                        </small>

                    </div>
                </div>
                <div class="form-group">
                    <label for="email">Email address</label>
                    <input type="email" name="email"  ng-model="testform.email"  class="form-control" id="email" placeholder="Enter email"/>
                     <div class="error" ng-show="signup_form.email.$dirty && signup_form.email.$invalid">
                        <small class="error" ng-show="signup_form.email.$error.email">
                                Your email not valid
                        </small>
                    </div>
               </div>
               <button type="submit" class="btn btn-default">Submit</button>
            </form>
    </div>
  </body>
</html>


样板
var app=angular.module（'testapp'，['ngRoute']）；
app.controller（'signupController'，['$scope'，函数（$scope）{
}]);
.错误{颜色：红色}
名称
你的名字是必需的。
电子邮件地址
您的电子邮件无效
提交

试试这个：

例子


你的电子邮件地址
要求的
无效电子邮件
提交

尝试在容器div上设置控制器

<div ng-controller="signupController">

检查这个例子

：谢谢你的帮助。但我还是得到了我在问题的SS中所显示的错误。是否可以访问controller中的form.email.$error.required？最后我发现了“意外标识符”的问题。这是因为当我从angular站点下载angular-route.js文件时，我也复制了“窗口大小：x视口大小：x”。现在，从我的库角度文件中删除后，问题就解决了。这是我的关键：

ng click=“submitted=true”

这个问题似乎与主题无关，因为它是关于打字错误的。@Stewie我更正了打字错误，但我仍然无法在单击“提交”按钮时进行验证。我编辑了这个问题。

<form name="form" ng-app>
 <div class="control-group" ng-class="{true: 'error'}[submitted && form.email.$invalid]">
     <label class="control-label" for="email">Your email address</label>
      <div class="controls">
            <input type="email" name="email" ng-model="email" required />
            <span class="help-inline" ng-show="submitted && form.email.$error.required">Required</span>
            <span class="help-inline" ng-show="submitted && form.email.$error.email">Invalid email</span>
        </div>
    </div>

    <button type="submit" class="btn btn-primary btn-large" ng-click="submitted=true">Submit</button>
</form>

<div ng-controller="signupController">