I have a a HTML form. I have added required tag against each input fields for which I require it to be filled. I am using $<form-name>.<input.field.name>.$error in AngularJS to check for errors during submission and apply error class to those fields.
Is there a way to prevent HTML5 validation popup retaining the required attribute at the same time?
You need the novalidate attribute.
<form novalidate>
...
</form>
Form's novalidate attribute on MDN
You can show your error message inside dirty condition of angular js and not on submission. Try like this:
<span style="color:red" ng-show="$<form-name>.<input.field.name>.$dirty && $<form-name>.<input.field.name>.$invalid">
<span ng-show="$<form-name>.<input.field.name>.$error.required">Name is required.</span>
</span>
This will show error message on focus out only. And on submit, default HTML5 required field error message will be shown.
You have to put novalidate at your form element:
<form novalidate>
<input type="text" required>
<button type="submit">Save</button>
</form>
Related
I have a form with an input of type=url. I want to show a custom message when the user tries to submit an invalid URL.
But, I don't want to re-check the url validity with custom javascript. I want the browser to validate, but I want a custom message. Is there an event I could listen to or some other property I could customize?
You can set the title with the pattern validation:
<form action="" method="get">
<input id="myURL"
name="myURL"
type="url"
required
pattern=".*\.myco\..*"
title="The URL must be in a Myco domain">
<input type="submit">
</form>
I am actually developing a Cordova application with AngularJS (1.5.11). I am facing a really strange bug with iOS which I don't have with Android (same code).
I removed all unneeded information from the form to reproduce the bug (classes, directives, extra divs...) and the bug is still there :(
Here is the form:
<form method="post" ng-submit="$ctrl.login()">
<input type="email" name="username" value="" required ng-model="$ctrl.username">
<input type="password" name="password" value="" required ng-model="$ctrl.password">
<button type="submit">Submit</button>
</form>
My form is submitting even if it is invalid. It is a basic login form with two fields (login, password) and a button.
Just for information, every form in my app is affected by this bug.
Did I miss something?
Thanks for your help :)
You have 3 options
1.- Disable the submit button if the form is invalid:
<form name="needNameForm" method="post" ng-submit="$ctrl.login()">
...
<button type="submit" ng-disabled="needNameForm.$invalid">Submit</button>
</form>
2.- Ignore the submit if the form is invalid:
<form name="needNameForm" method="post"
ng-submit="needNameForm.$valid && $ctrl.login()">
...
</form>
3.- Check validity in your submit method:
<form name="needNameForm" method="post"
ng-submit="$ctrl.login(needNameForm)">
...
</form>
<!-- for testing purposes you can use this line below -->
<pre>{{needNameForm | json}}</pre>
In your controller:
angular.controller('name', function(){
var vm = this;
vm.login = function(formController){
if(formController.$valid){
doStuff();
}
}
}
with this 3rd option you will have more control if you want to validate each input in your form, the formController object will have all info for each input, and also you will require to add a name to the inputs so you can get full info about them, here is all the info about it: https://docs.angularjs.org/api/ng/type/form.FormController
I am using ngTagsInput Angular plugin for getting multiple email ids. Below is my code:
<form name="contact_us" role="form" novalidate enctype="multipart/form-data">
<div class="form-group">
<label class="control-label" for="from_email">
From
</label>
<tags-input ng-model="contactUs.emails" type="email" id="from_email"
placeholder="From" name="from_email"
allowed-tags-pattern="^[A-Za-z0-9._%+-]+#(?:[A-Za-z0-9-]+.)+[A-Za-z]{2,}"
allow-leftover-text="false" ng-required="true" add-on-space="true">
</tags-input>
<p class="help-block" style="color:red"
ng-show="contact_us.from_email.$invalid && (contact_us.$submitted || contact_us.$dirty)">
Please enter proper email address
</p>
<button type="submit" class="btn btn-default" ng-click="Send(contact_us)">
Send
</button>
</form>
In above code 3 validation has been added those are as follows:
For Mandatory fields.
Field should accept only an email id.
It should not allow duplicate email id.
The above cases are working fine. But, I want to show the error message dynamically according to the above one of the case has occurred. Please help me out !!!
ngTagsInput supports attribute below for change to capture, it fires before adding to model
on-tag-adding="foo($tag)"
$scope.foo(function(tag){
// look for error
// if found return false
// change the text of tag
tag.text='what ever';
return tag;
})
For required:
<p class="help-block" style="color:red"
ng-show="contact_us.from_email.$error.required">
email address is required
</p>
For pattern & duplicate, I think no validation flag has been provided and you have to write your own to perform validation.
For duplicate, maybe this will help.
Angularjs - How to check for unique inputs and if there is a duplicate mark both as invalid
I've written a form with Angular.js that requires a field to be filled out before it is submitted. The validation works correctly (the field shows a validation error when I submit the form) but the form still seems to perform its ng-click action.
Are angular forms supposed to submit despite validation errors? What's the best way to prevent it from submitting if there are validation errors?
Here's the form in question:
<form role="form">
<div class="form-group">
<label>Book Id</label><br>
<input ng-model="bookToSend.bookId" class="form-control" maxlength="40" required type="text">
</div>
<button type="submit" ng-click="sendBookUpdate(BookToSend)">Send Book Update</button>
</form>
Angular doesn't prevent forms from submitting when there are validation errors.
Actually with the snippet you pasted, the errors are shown just because by default error validation is provided with html5.
You should check the docs: https://docs.angularjs.org/guide/forms
Basically you have to name your form:
<form name="myForm" role="form">
and then you can prevent your form from submitting inside your controller with:
$scope.sendBookUpdate(BookToSend, form) {
if (form.$invalid) {
return; // and add any error to the view if you want
}
...
}
another option is to prevent submitting from the view:
<form name="myForm" role="form" ng-submit="myForm.$valid && sendBookUpdate(BookToSend)">
You could disable the button until the form has valid data
<button type="submit" data-ng-disabled="form.$invalid">Send Book Update</button>
EDIT:
When I wrote the answer below, I was under the assumption that the ngClick was completely separate from any form submission handlers that angular uses. I was wrong, however, as shown in the comments below. I'll keep this answer up, despite its inaccuracy, to inform those that come here with the same misunderstanding as I had, since, to me at least, it's kind of counter-intuitive to have an ng-click double as a submit handler.
ng-click is separate from the form's submit handler, and will run every time you click the button regardless of whether or not it passes the validation checks.
The solution to your problem would be to take sendBookUpdate(BookToSend), and place it in an ng-submit attribute on the form itself. See the code below:
<form role="form" ng-submit="sendBookUpdate(BookToSend)">
<div class="form-group">
<label>Book Id</label><br>
<input ng-model="bookToSend.bookId" class="form-control" maxlength="40" required type="text">
</div>
<button type="submit">Send Book Update</button>
</form>
Let me know if that helps.
Edit:
Here's some more info regarding ngSubmit:
https://docs.angularjs.org/api/ng/directive/ngSubmit
I'm relatively new to AngularJS and I am trying to sumbit a regular form. I have basic form that looks like this:
<form method="post" enctype="multipart/form-data">
input type="text" class="title span5" name="post_title" placeholder="A catchy title here..." value="" />
<input type="file" name="post_image" />
<input type="submit" class="btn btn-success" value="Create Post" />
</form>
But I noticed that AngularJS adds its own values to the form.
<form method="post" enctpye="multipart/form-data" class="ng-pristine ng-valid">
And I am ununable to submit the form. How can I disable the automatic validation that Angular JS is adding to the app?
Quoted from the documentation:
For this reason, Angular prevents the default action (form submission to the server) unless the element has an action attribute specified.
IMHO, you should read the doc to gain some general understanding of single page application, and the reason why angular's preventing the default behavior.
UPDATE : This does NOT work ... well at least not in a way you'd like it to. Adding ng-non-bindable to the form or any input breaks ALL binding. So, your ng-model in the inputs won't work anymore.
ng-non-bindable is possibly your best choice. It will prevent AngularJS from doing ANY validation. So, you'll be responsible for showing invalid and checking validity.
https://stackoverflow.com/a/19387233/75644