<form name="Form" class="form" data-ng-enter="saveInfo()" novalidate>
<div class="question-group">
<label class="question" for="FirstName">
Your first name*
<input id="FirstName" type="text" data-ng-model="app.FirstName" maxlength="40" required />
</label>
<label class="question" for="LastName">
Last name*
<input id="LastName" type="text" data-ng-model="app.LastName" maxlength="80" required />
</label>
</div>
<div style="margin: 0 auto; width: 155px;" class="button-center">
<button class="btn btn-success btn-lg" data-ng-click="saveInfo()" data-ng-disabled="Form.$invalid">
Save
</button>
</div>
I am disabling the save button if the form fails client side validations but when I hit enter in the input field it bypasses the client side validations and submits the form. I don't want that to happen. I want to submit the application when I hit enter if and only if it passes all the client side validations.
Is there any way to check if the button is disabled then data-ng-enter shouldn't work something like that?
You should use data-ng-submit instead of data-ng-enter
Related
Expected: After Entering Valid Email ID pattern button should be enabled.
Happened: After Entering Valid Email ID button goes disabled.
This is my Input textfield in HTML:
<form class="form-inline">
<div class="form-group">
<label for="emailID">Enter Email ID</label>
<input type="email" class="form-control" id="emailID" ng-model="c.emailID" placeholder="Enter EmailID">
</div>
<div class="form-group">
<label for="Password">Enter Password</label>
<input type="password" class="form-control" id="password" ng-model="c.password" placeholder="Enter Password">
</div>
<button type="submit" ng-model="button" ng-click ="submit(c)" ng-disabled="c.emailID" class="btn btn-primary">Login</button>
This is my AngularjS Script :`
var myApp1=angular.module('myApp',[]);
myApp1.controller('myController',['$scope',function($scope)
{
$scope.submit=function(c)
{
}
}]);
First add a name to your form and to your input:
<form name="myForm" class="form-inline">
<input type="email" name="emailID" class="form-control" id="emailID" ng-model="c.emailID" placeholder="Enter EmailID">
Then change your ng-disabled:
<button type="submit" ng-model="button" ng-click ="submit(c)" ng-disabled="!(myForm.emailID.$valid && myForm.emailID.$dirty)" class="btn btn-primary">Login</button>
$dirty is added because we want the user to actually enter an value before we enable. Or you can add required on your input if its a compulsory input field.
Also refer: http://www.w3schools.com/angular/angular_validation.asp
I have a form with some angular validation, which I don't want to run at page load. Here is a stripped down example of my form:
<form ng-submit="vm.submit()" name="form" novalidate>
<input class="form-control" ng-model="vm.userName" required />
<button ng-disabled="form.$invalid && !form.vm.userName.$pristine" type="submit">Log In</button>
</form>
I'm attempting to turn off initial validation with !form.vm.userName.$pristine, as the user won't have touched the username text box yet. However, this isn't working and the form validates as usual on page load. Am I missing something?
You need to give input a name, so that ngFormController can register this element under and its validation rules. Then you would be able to check form.userName.$pristine:
<form ng-submit="vm.submit()" name="form" novalidate>
<input class="form-control" name="userName" ng-model="vm.userName" required />
<button ng-disabled="form.$invalid && !form.userName.$pristine" type="submit">Log In</button>
</form>
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 an Angular modal form that I'm styling with Bootstrap. I I want to validate when the user clicks "I Agree." (I don't want to submit the form because it is part of a larger form that will be submitted later.) How can I force this validation when the button is clicked? Also, should the form name be the same as the larger form or have its own name?
Modal:
<form name="agreementForm" novalidate>
<div class="form-group" ng-class="{
'has-error':agreementForm.signature.$invalid && !agreementForm.signature.$pristine
}">
<label class="control-label" for="signature">Signature</label>
<input type="text" id="signature" name="signature" ng-model="agreementForm.contact.signature"
placeholder="Signature (e.g., /John Doe/)" class="form-control" ng-minlength=1 ng-model-options="{ updateOn: 'blur' }" required />
<span ng-show="agreementForm.signature.$error.required && !agreementForm.signature.$pristine" class="help-block">
Please type your signature to agree</span>
</div>
<div class="modal-footer">
<button ng-click="$dismiss()" class="btn btn-warning">Cancel</button>
<button ng-click="$close()" class="btn btn-primary">I agree</button>
</div>
</form>
Would ng-submit solve your issue? For instance,
<form ng-submit="$close()">
<input type="text" ng-model="signature" ng-required="true"/>
<button type="submit">Submit</button>
</form>
It prevents the request being sent to the server and should still perform the validation on the form.
I want to implement some simple form validation in my AngularJS app, but I don't want it to show any validation errors until after the user has clicked the form submit button. I don't want it to validate as I type or even on exiting the field.
Is there a way to do this? I'll need to write at least one custom validator directive so it will need to work with that.
I am finding form validation in AngularJS to be very difficult so far, it's hard to get it to work exactly as you want.
You could do something like this. Here's an 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>