I'm creating a form on AngularJS, I'm using required attribute on username,
it's not working on submitting the form.
<div ng-app="myOwnModule" ng-controller="myOwnCon">
<form name="myOwnForm" novalidate >
<input type="text" name="moname" id="moname" ng-model="myOwnForm.moname" required />
<div ng-messages="myOwnForm.moname.$error" ng-if="myOwnForm.moname.$touched">
<p ng-message="myOwnForm.moname.$error.required">Required</p>
</div>
<input type="submit" name="mosave" id="mosave" ng-click="send($event)" value="Send" />
</form>
</div>
My module
var myOwnModule = angular.module('myOwnModule', ['ngMessages']);
You have conflict with you data model which you have used for binding and the form name. Because as I can see you are myOwnForm for data & myOwnForm for form name. You should change your data model to use some different name like model
And other than that don't use ng-show.
<form name="myOwnForm" novalidate >
<input type="text" name="moname" id="moname" ng-model="model.test" required />
<div ng-messages="myOwnForm.moname.$error" ng-show="myOwnForm.moname.$touched">
<p ng-message="required">Required</p>
</div>
<input type="submit" name="mosave" id="mosave" ng-click="send($event)" value="Send" />
</form>
Plunkr
Related
can we have two forms with the same form name on the same page ?
will angular validation work properly for each form ?
For example
<form name="ajax">
<input type="text" name="fname" />
</form>
<form name="ajax">
<input type="text" name="fname" />
</form>
As per my understanding angular validation is not working properly with same form name in same page.
Angular will only consider the last form name
Ex:
<form name="myForm">
<input name="myInput" ng-model="myInput" required>
</form>
<form name="myForm">
<input type="email" name="myInpu" ng-model="myInpu">
</form>
<p>The input's valid state is:</p>
<h1>Form 1 : {{myForm.myInput.$valid}}</h1>
<h1>Form 2 : {{myForm.myInpu.$valid}}</h1>
My form is as shown below. But on click of submit button the form is submitting with out validation...I am using spring security so xhr call won't allow to redirect on another page from server(so I have to give the url in action). If I remove "novalidate" page is taking default html validation
<form name="loginForm" id="loginForm" action="${pageContext.request.contextPath}/j_spring_security_check" novalidate>
<div class="panel-body">
<div class="form-group has-feedback">
<input type="email" name="j_username" ng-model="j_username"
class="form-control placeholder-color" placeholder="Email"
ng-pattern="/^[a-zA-Z0-9._-]+#[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/"
required autocomplete="off" />
<div class="form-devider"></div>
<div ng-messages="loginForm.j_username.$error"
ng-if="loginForm.$submitted">
<div class="has-error" ng-message="required">
<spring:message code="peak.email.required" />
</div>
<div class="has-error" ng-message="pattern">
<spring:message code="peak.enter.valid.email" />
</div>
</div>
</div>
<div class="form-group has-feedback">
<input type="password" name="j_password" id="j_password"
placeholder="Password" class="form-control placeholder-color"
ng-model="j_password" required autocomplete="off" /> <%-- <input
type="hidden" name="url" id="url" placeholder="Password"
ng-model="link"
ng-init="link='${pageContext.request.contextPath}/j_spring_security_check'" /> --%>
<div class="form-devider"></div>
<div ng-messages="loginForm.j_password.$error"
ng-if="loginForm.$submitted">
<div class="has-error" ng-message="required">
<spring:message code="peak.password.required" />
</div>
</div>
</div>
</div>
<div id="login-error-box1" style="display: none"></div>
<button type="submit"
class="btn btn-block custome-btn-orange pbi-mt15">
<spring:message code="peak.login" />
</button>
</form>
Thanks in advance
Take a look at this plnkr : http://plnkr.co/edit/rZaKXEp7vspvEerFtVH8?p=preview
$scope.validate = function(isValid,$event){
console.log(isValid);
console.log($scope.loginForm);
if(!isValid){
$event.preventDefault();
}
}
You need to create an angular controller with a function to run on ng-submit. That function will look for if form is invalid and stops it from posting the form.
which allows you to see your error messages.
I've this basic form implemented using AngularJS and Bootstrap:
http://jsfiddle.net/dennismadsen/0stwd03k/
HTML
<div ng-controller="MyCtrl">
<form class="well" name="formTest" ng-submit="save()">
<div class="form-group">
<label for="name">Name*</label>
<input type="name" class="form-control" id="name" placeholder="Enter name" required />
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
JavaScript
var myApp = angular.module('myApp', []);
function MyCtrl($scope) {
$scope.save = function () {
};
}
Result
The Name input field is required. When I click the submit button, I need the input field to have a red border if it's invalid. How can this be done?
Alternatively, if I unfocus the input field and it's still not valid, it would be great that the red corder is shown on that time, instead of waiting for the form submit.
Twitter Bootstrap has an has-error class, so I would use this in conjunction with ng-class for the form group, then a label with the label and label-danger classes for good measure:
<div class="form-group" ng-class="{'has-error': errors.Name }">
<label for="name">Name*</label>
<input type="name" class="form-control" id="name" placeholder="Enter name" required />
<span class="label label-danger" ng-if="errors.Name">{{errors.Name}}</span>
</div>
Then in your controller, have an errors object, and set the Name property of this to a string when the name is invalid.
The first thing you were missing was adding ng-model='name' to input field, then only will the form become invalid once you click submit, otherwise the form will always be valid since it considers that there is no field present.
Then I'd add the submitted class on the submit click button, then put the border css like .submitted would be the parent and .ng-invalid would be the child so we can put the style on .submitted .ng-invalid
HTML
<div ng-controller="MyCtrl">
<form class="well" name="formTest" ng-class="{'submitted': submitted}" ng-submit="save()" >
<div class="form-group">
<label for="name">Name*</label>
<input type="name" class="form-control" id="name" placeholder="Enter name" ng-model="name" required />
</div>{{submitted}}
<button type="submit" class="btn btn-default" ng-click="submitted= true;">Submit</button>
</form>
</div>
CSS
.submitted .ng-invalid{
border: 1px solid red;
}
Working Fiddle
Hope this could help you, Thanks.
Basically you need angular to take over validation, so add novalidate to form. Also add ng-class to input field to determine wether to add error css
<form name="myForm" novalidate ng-submit="test()">
<input type="text" name="user" ng-model="user" required ng-class="myForm.user.$invalid && myForm.user.$dirty ? 'error' : ''">
<span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
<span ng-show="myForm.user.$error.required">Username is required. </span>
</span>
<p>
<input type="submit"
ng-disabled="myForm.user.$dirty && myForm.user.$invalid ||
myForm.email.$dirty && myForm.email.$invalid">
</p>
</form>
Good luck..
i have a form like this and i like to user angularjs for form validation
<form name="userrequest">
<div id="userdetails">
<input type="text" id="buyerName" />
</div>
<div id="buyerDetails">
<input type="text" id="buyerName" />
<input type="text" id="buyercity" />
</div>
</form
how can i check any input elements inside buyerDetails div is in dirty state?
You should use ng-model on each form field with name attribute, that will enable the dirty checking on form elements. You could check any form field dirty or not by using its name
Markup
<form name="userrequest">
<div id="userdetails">
<input type="text" id="buyerName" name="userBuyerName"
ng-model="form.user.buyerName" />
</div>
Dirty
<br/> form.user.buyerName {{userrequest.userBuyerName.$dirty}}
<div id="buyerDetails">
<input type="text" id="buyerName" name="buyerName"
ng-model="form.buyer.buyerName" />
<input type="text" id="buyercity" name="buyerName"
ng-model="form.buyer.buyerName" />
</div>
Dirty
<br/> form.buyer.buyerName {{userrequest.buyerName.$dirty}}
<br/> form.buyer.buyercity {{userrequest.buyercity.$dirty}}
</form>
Is form is Dirty {{userrequest.$dirty}}
I have a $rootScope variable:
$rootScope.register_data = {};
I have a view which contains a form:
<form name="register_data">
<div class="popup signup">
<div class="social">
<a ng-controller="FacebookCtrl" ng-click="login()" href="javascript:void(0)" class="facebook fb-login-button">Sign up with Facebook</a>
<div class="clear"></div>
</div>
<div class="userinfo">
<div class="left"><input type="text" ng-model="register_data.firstname" placeholder="First Name" tabindex="1" required></div>
<div class="right"><input type="text" ng-model="register_data.email" placeholder="Email Address" tabindex="4" required></div>
<div class="left"><input type="text" ng-model="register_data.lastname" placeholder="Last Name" tabindex="2" required></div>
<div class="right optional"><div class="tip">optional</div><input type="text" ng-model="register_data.dob" tabindex="5" placeholder="DoB (dd/mm/yyyy)"></div>
<div class="left"><input type="text" ng-model="register_data.phone" placeholder="Phone Number" tabindex="3" required></div>
<div class="right password"> <input type="password" ng-model="register_data.password" placeholder="Password" tabindex="6" required></div>
<div class="clear"></div>
</div>
<div class="control">
<span class="terms">I agree to the terms & conditions</span>
Sign up
</div>
</div>
</form>
The form has a name register_data and each field is bound to that via ng-model. It seems to overwrite my $rootScope.register_data variable as when I update that none of the form controls update. Though if I remove the form name then it works. However i need the form name to do proper form validation.
Anyone know how I can bind the form controls to a scope object but also keep the form validation?
Change the form name to be something else other than the name used as model, since the form controller will be published into related scope, under this name.