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>
Related
I have a form by some input. and some time I have another form by some input into this form.
when I have not internal form, my parent form is valid, but when I have internal in original form and original form is valid(I see inputs complete truly) and internal form is not valid, my original form is invalid too. if click on submit1 I need to save input in original form and if click on submit2 i need to save internal inputs.
In the webform we have grouped validation. have we such grouped in webform in the angular validation for this case?
<form name="original" novalidate class="form-horizontal bv-form">
<div class="col-md-3 col-sm-6" ng-class="{ 'has-error': !original.name.$pristine && original.name.$invalid ,'has-success':!original.name.$invalid}">
<label>Name</label>
<input auto-focus class="form-control" type="text" name="name" ng-model="vm.original.name" required />
<i class="form-control-feedback glyphicon" ng-class="{ 'glyphicon-ok' : original.name.$dirty && original.name.$valid , 'glyphicon-remove': original.name.$dirty && original.name.$invalid}" data-bv-icon-for="firstName" ng-show="original.name.$dirty">
</i>
<div>
<span class="help-block " ng-show="original.name.$invalid && !original.name.$pristine">
name required
</span>
</div>
</div>
<form name="internal" novalidate class="form-horizontal bv-form">
<div class="col-md-3 col-sm-6" ng-class="{ 'has-error': !internal.name.$pristine && internal.name.$invalid ,'has-success':!internal.name.$invalid}">
<label>Name</label>
<input auto-focus class="form-control" type="text" name="name" ng-model="vm.internal.name" required />
<i class="form-control-feedback glyphicon" ng-class="{ 'glyphicon-ok' : internal.name.$dirty && internal.name.$valid , 'glyphicon-remove': internal.name.$dirty && internal.name.$invalid}" data-bv-icon-for="firstName" ng-show="internal.name.$dirty">
</i>
<div>
<span class="help-block " ng-show="internal.name.$invalid && !internal.name.$pristine">
name required
</span>
</div>
</div>
<button type="submit" id="submit2" class="btn btn-primary blue" ng-click="int=internal.$valid && $scope.save2()">
</form>
<button type="submit" id="submit1" class="btn btn-primary blue" ng-click="original.$valid && $scope.save()">
</form>
You should use ng-form instead of form if you are nesting forms inside a form for further information refer the ng-form documentation.
Nestable alias of form directive. HTML does not allow nesting of form
elements. It is useful to nest forms, for example if the validity of a
sub-group of controls needs to be determined.
I found my solution.
In this case I use ng-if for prevent validation for internal form when submitting external form.
If client working on external form I hidden the Internal form and I can submitting the external form. and when client try to submitting internal form I show it to client and I can validity the internal form inputs and submit it.
In my form I used ng-pattern for date, when i entered the wrong pattern and submit the form, its get submitted. Here my code.
<form role="form" name="editForm" ng-submit="saveRecord()">
<label class="control-label">DATE</label>
<input type="text" ng-model="userRecord.date" ng-pattern='/^((0[1-9]|1[012])[\/](0[1-9]|[12][0-9]|3[01])[\/](19|20)[0-9]{2})*$/'
name="date" class="form-control" required/>
<div role="alert">
<span style="color:red" ng-show="editForm.date.$dirty">
<span ng-show="editForm.date.$error.pattern">Incorrect Format, should be MM/DD/YYYY</span>
<span ng-show="editForm.date.$error.required">date is required.</span>
</span>
</div>
<button type="submit" class="btn btn-primary" >Save</button>
</form>
It will display the error also, but if i submit the form its get submited.
I have tried with several searches but could not find solution for this.
You can go down 2 paths:
Disable the form button as long as the form is invalid
You need to check in your form submit function if the form is valid or not
Solution 1
<button type="submit" class="btn btn-primary" ng-disabled="editForm.$invalid">Save</button>
Solution 2
<form role="form" name="editForm" ng-submit="saveRecord(editForm.$valid)">
And now in your controller do the next in the saveRecord function:
$scope.saveRecord = function(valid) {
if(!valid) { return; }
}
I think you have missed novalidate directory in form tag
like
<form role="form" name="editForm" ng-submit="saveRecord()" novalidate>
and edit also validate with submit button like
ng-show="editForm.$submitted && editForm.date.$error.pattern"
ng-show="editForm.$submitted && editForm.date.$error.required"
i hope its help
Below is the code to stop submitting page if pattern does not match
<span class="error" style="color:red" ng-show="externalLinkForm.link.$error.pattern">
Please use hash</span>
To study detail about the validation rule needed in ng-pattern please see the link to get in detail of the validation rules
https://www.w3schools.com/Jsref/jsref_obj_regexp.asp
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 have custom html5 error message for input, which changes validation error text in chrome.
<input
oninvalid="setCustomValidity('It's custom message!')"
onchange="try{setCustomValidity('')}catch(e){}">
How can I do this with Angular directive?
Updated
Let's say, I want type <input custom-validity> instead of this.
You can learn all about doing form validation the Angular way in their documentation.
You don't need to create your own directives, because angular already has great form validation support built in.
Below is an example how to use the $dirty and $invalid attributes to show or hide validation messages. 'dirty' means that the form has been modified by the user.
<div ng-app="app">
<form name="myForm" novalidate>
<p>
<label>Name
<input type="text" name="name" ng-model="name" required>
<span ng-show="myForm.name.$invalid && myForm.name.$dirty">
Name required
</span>
</label>
</p>
<p>
<label>Email
<input type="email" name="email" ng-model="email">
<span ng-show="myForm.email.$invalid && myForm.email.$dirty">
Put a valid email
</span>
</label>
</p>
<input type="submit" value="Submit" ng-disabled="myForm.$invalid">
</form>
</div>
You can also style the valid/invalid fields using a style rule like this:
form input.ng-invalid.ng-dirty { ... }
I am using angular validation on an html page, where I have defined a form along with validation on the form. However, when I run the page, all the validations I have used on the page is visible. Is there a way I can hide all the validations?
<form ng-controller="validateCtrl"
name="loginForm" novalidate>
<p>UserName:<br>
<input type="text" name="uName" ng-model="uName" required>
<span style="color:red" ng-show="loginForm.uName.$dirty && loginForm.uName.$invalid && loginForm.uName.$error.required">
Username is required
</span>
</p>
<p>Password:<br>
<input type="text" name="pwd" ng-model="pwd" required>
<span style="color:red" ng-show="loginForm.pwd.$dirty && loginForm.pwd.$invalid">
<span ng-show="loginForm.pwd.$error.required">Password is required.</span>
</span>
</p>
<p>
<input type="submit" ng-click="popupuser()"
ng-disabled="loginForm.$invalid ">
</p>
</form>
<script src="https://code.angularjs.org/1.2.3/angular.min.js"></script>
Your code for form is fine please see here http://jsbin.com/figuve/1/edit
Make sure that your validateCtrl exist otherwise validation will not work plase see here
http://jsbin.com/figuve/2/edit
or
remove ng-controller="validateCtrl" from your form if you don't need it.
please see here http://jsbin.com/figuve/3/edit
You can try use variable to check is form submited, like that
<span ng-show="(loginForm.uName.$dirty || isSubmitted) && loginForm.uName.$error.required">Username is required</span>