Databases
StackOverflow2013
Postsdbo
POForm Validation in AngularJS on submit is not working
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POForm Validation in AngularJS on submit is not working
    text
    copied!<p>I am trying to validate a form and display the validation result just under the text fields on submission of form as below.</p> <p>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.</p> <p>My codes for this is:</p> <blockquote> <p>formSumbit.html</p> </blockquote> <pre><code>&lt;!DOCTYPE html&gt; &lt;html lang="en" ng-app="testapp"&gt; &lt;head&gt; &lt;meta charset="utf-8"/&gt; &lt;title&gt;BoilerPlate&lt;/title&gt; &lt;link rel="stylesheet" type="text/css" href="/reset.css"&gt;&lt;/link&gt; &lt;link rel="stylesheet" type="text/css" href="/lib/bootstrap/css/bootstrap.css"&gt;&lt;/link&gt; &lt;script src="/lib/angular/angular.js" &gt;&lt;/script&gt; &lt;script src="/lib/angular/angular-route.js" &gt;&lt;/script&gt; &lt;script src="/jquery.min.js" &gt;&lt;/script&gt; &lt;script src="/lib/bootstrap/js/bootstrap.js" &gt;&lt;/script&gt; &lt;script&gt; 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; } } }]); &lt;/script&gt; &lt;style type="text/css"&gt; .error{color:red} &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div&gt; &lt;form name="signup_form" ng-submit="signupForm()" novalidate &gt; &lt;div class="form-group"&gt; &lt;label for="name"&gt;Name&lt;/label&gt; &lt;input type="text" name="name" ng-model="testform.name" required class="form-control" id="name" placeholder="Name"/&gt; &lt;div class="error" ng-show="signup_form.name.$dirty &amp;&amp; signup_form.name.$error.required &amp;&amp; signup_form.submitted"&gt; &lt;small class="error"&gt; Your name is required. &lt;/small&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="form-group"&gt; &lt;label for="email"&gt;Email address&lt;/label&gt; &lt;input type="email" name="email" ng-model="testform.email" class="form-control" id="email" placeholder="Enter email"/&gt; &lt;div class="error" ng-show="signup_form.email.$dirty &amp;&amp; signup_form.email.$invalid &amp;&amp; signup_form.submitted"&gt; &lt;small class="error" ng-show="signup_form.email.$error.email"&gt; Your email not valid &lt;/small&gt; &lt;/div&gt; &lt;/div&gt; &lt;button type="submit" class="btn btn-default"&gt;Submit&lt;/button&gt; &lt;/form&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>But i am able to do the validation in on Blur event. see the code below which is working on onBlur.</p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html lang="en" ng-app="testapp"&gt; &lt;head&gt; &lt;meta charset="utf-8"/&gt; &lt;title&gt;BoilerPlate&lt;/title&gt; &lt;link rel="stylesheet" type="text/css" href="/reset.css"&gt;&lt;/link&gt; &lt;link rel="stylesheet" type="text/css" href="/lib/bootstrap/css/bootstrap.css"&gt;&lt;/link&gt; &lt;script src="/lib/angular/angular.js" &gt;&lt;/script&gt; &lt;script src="/lib/angular/angular-route.js" &gt;&lt;/script&gt; &lt;script src="/jquery.min.js" &gt;&lt;/script&gt; &lt;script src="/lib/bootstrap/js/bootstrap.js" &gt;&lt;/script&gt; &lt;script&gt; var app=angular.module('testapp', ['ngRoute']); app.controller('signupController', ['$scope', function($scope) { }]); &lt;/script&gt; &lt;style type="text/css"&gt; .error{color:red} &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div&gt; &lt;form name="signup_form" novalidate &gt; &lt;div class="form-group"&gt; &lt;label for="name"&gt;Name&lt;/label&gt; &lt;input type="text" name="name" ng-model="testform.name" required class="form-control" id="name" placeholder="Name"/&gt; &lt;div class="error" ng-show="signup_form.name.$dirty &amp;&amp; signup_form.name.$error.required"&gt; &lt;small class="error"&gt; Your name is required. &lt;/small&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="form-group"&gt; &lt;label for="email"&gt;Email address&lt;/label&gt; &lt;input type="email" name="email" ng-model="testform.email" class="form-control" id="email" placeholder="Enter email"/&gt; &lt;div class="error" ng-show="signup_form.email.$dirty &amp;&amp; signup_form.email.$invalid"&gt; &lt;small class="error" ng-show="signup_form.email.$error.email"&gt; Your email not valid &lt;/small&gt; &lt;/div&gt; &lt;/div&gt; &lt;button type="submit" class="btn btn-default"&gt;Submit&lt;/button&gt; &lt;/form&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload