admin管理员组

文章数量:1418306

I am trying to validate a form and display the validation result just under the text fields on submission of form as below.

But i am not able to validate the input field on submit , but i am able to validate onBlur, i tried both ways, see belo the codes for onSubmit and onBlur respectively.

My codes for this is:

formSumbit.html

<!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) {
      $scope.submitted = false;
      $scope.signupForm = function() {
        console.log("hi");
        if ($scope.signup_form.$valid) {
          // Submit as normal
        } else {
          $scope.signup_form.submitted = true;
        }
      }
    }]);
    </script>
    <style type="text/css">
    .error{color:red}
    </style>

  </head>
  <body>
    <div>
            <form name="signup_form"  ng-submit="signupForm()" 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 && signup_form.submitted">
                        <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 && signup_form.submitted">
                        <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>

But i am able to do the validation in on Blur event. see the code below which is working on 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>

I am trying to validate a form and display the validation result just under the text fields on submission of form as below.

But i am not able to validate the input field on submit , but i am able to validate onBlur, i tried both ways, see belo the codes for onSubmit and onBlur respectively.

My codes for this is:

formSumbit.html

<!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) {
      $scope.submitted = false;
      $scope.signupForm = function() {
        console.log("hi");
        if ($scope.signup_form.$valid) {
          // Submit as normal
        } else {
          $scope.signup_form.submitted = true;
        }
      }
    }]);
    </script>
    <style type="text/css">
    .error{color:red}
    </style>

  </head>
  <body>
    <div>
            <form name="signup_form"  ng-submit="signupForm()" 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 && signup_form.submitted">
                        <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 && signup_form.submitted">
                        <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>

But i am able to do the validation in on Blur event. see the code below which is working on 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>
  • javascript
  • forms
  • validation
  • angularjs
Share Improve this question edited Dec 18, 2013 at 13:54 Mohamed Hussain asked Dec 18, 2013 at 9:30 Mohamed HussainMohamed Hussain 7,72315 gold badges60 silver badges87 bronze badges 2
  • 2 This question appears to be off-topic because it is about typo. – Stewie Commented Dec 18, 2013 at 12:25
  • 1 @Stewie I corrected the Typo, still i am not able to do the validation on submit button click. I edited the question. – Mohamed Hussain Commented Dec 18, 2013 at 13:53
Add a ment  | 

2 Answers 2

Reset to default 3

Try this:

Example

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

Try to set the controller on the container div

<div ng-controller="signupController">

Check this example http://codepen.io/sevilayha/pen/xFcdI

本文标签： javascriptForm Validation in AngularJS on submit is not workingStack Overflow

版权声明：本文标题：javascript - Form Validation in AngularJS on submit is not working - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745282403a2651499.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。