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.
但是我不能在submit上验证输入字段，但是我可以验证onBlur，我尝试了两种方法，分别查看onSubmit和onBlur的代码。
My codes for this is:
我的代码是:
formSumbit.html
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.
但是我可以在模糊事件中进行验证。请参阅下面正在处理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>
2 个解决方案
#1
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>
#2
0
Try to set the controller on the container div
尝试在容器div上设置控制器
<div ng-controller="signupController">
Check this example http://codepen.io/sevilayha/pen/xFcdI
检查这个例子http://codepen.io/sevilayha/pen/xFcdI
#1
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>
#2
0
Try to set the controller on the container div
尝试在容器div上设置控制器
<div ng-controller="signupController">
Check this example http://codepen.io/sevilayha/pen/xFcdI
检查这个例子http://codepen.io/sevilayha/pen/xFcdI