I have the following code:
<form>
<input type="email" id="login_email" required>
<input type="submit" value="Sign in" ng-click="signIn()">
</form>
The problem with above code is that signIn() method gets called even if there is an email validation error from HTML5 side. In general how to ensure that signIn() method gets called only when all the input validation of the form are successful?
Use $pristine to find out if the form is empty, and $invalid to find out if the form is populated but has invalid values (maybe an incorrect email, for example).
<form name="myForm">
<input type="email" name="email" ng-model="email" required />
<button ng-click="signIn()" ng-disabled="myForm.$invalid || myForm.$pristine">Save</button>
</form>
So now your submit button will be disabled (not clickable) until your form is valid.
EDIT
In order to validate only with HTML5 validation, add a name attribute to your form and you can access the validity of it during submission:
<form name="myForm">...</form>
$scope.signIn = function(){
if ($scope.myForm.$valid){
// do sign in logic here
}
}
Maybe even inline the logic on your submit button (if it works):
<input type="submit" value="Sign in" ng-click="myForm.$valid && signIn()">
So signIn would only be called if the first part was true.
EDIT 2
Based on the information found on the AngularJS docs here, can you try the following as well?:
<form name="myForm">
<input type="email" name="email" ng-model="email" required />
<button ng-click="signIn()" ng-disabled="signIn()">Save</button>
</form>
$scope.signIn = function () {
if ($scope.myForm.email.$error.required) {
// ...
}
};
We are now following the $scope.myForm.email.$error.required syntax approach.
Try logging $scope.myForm or $scope.myForm.email and see what you get as you modify the value.
Related
I am trying to stop the browser from validating the form on submit. I have overridden the onsubmit event to use my own function. Unfortunately, when I submit the form, it is still validated, and my function does not run. The following is the code:
function submitFunction() {
alert("Name is required.");
event.preventDefault();
}
<form onsubmit="submitFunction()">
<input type="text" placeholder="Name" required>
<input type="submit" value="submit">
</form>
How can I fix this? Thanks for any help!
If you add to your form the attribute called novalidate then it will call your function:
function submitFunction() {
alert("Name is required.");
}
<form onsubmit="submitFunction()" novalidate>
<input type="text" placeholder="Name" required>
<input type="submit" value="submit">
</form>
From the documentation of <form>:
This Boolean attribute indicates that the form shouldn't be validated when submitted. If this attribute is not set (and therefore the form is validated), it can be overridden by a formnovalidate attribute on a <button>, <input type="submit">, or <input type="image"> element belonging to the form.
I'm trying to make use of the HTML5 <input type="email" /> validation check.
I can get it working fine doing this:
<form>
<input type="email" />
<input type="submit" />
</form>
This gets the validation to work on clicking the sumbit button. However I'd like to trigger the form to submit upon having my email field blur.
How do I trigger the form without a submit button onBlur?
Like this:
<form>
<input type="email" onBlur={/* trigger form submission */} />
</form>
Alternatively, is there a better approach to performaning the HTML5 email validation check upon input blur?
Put a ref attribute on your form and call the submit function:
<form ref="myForm">
<input type="email" onBlur={this.submitForm.bind(this)} />
</form>
Add a function:
submitForm(){
this.refs['myForm'].submit()
}
use the native checkValidity method
<form>
<input type="email" id="a" />
</form>
const a = document.querySelector('#a')
a.addEventListener('blur', e => {
const isValid = e.target.checkValidity()
console.log(isValid)
})
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
So I have this little contact form on my site, and it's suppose to input some text into an empty p tag telling the client that's it's been submitted. It works fine, it does what it should, but in IE/Edge it ignores everything and inputs the word null into the p tags.
You'll have to forgive me, I'm still new to javascript, but I couldn't find anything anywhere to address this bug. Any help would be greatly appreciated.
<form id="contact-form" method="post" action="#" onsubmit="return setReturn()">
<input type="hidden" value="someone#email.com" name="emailTo">
<fieldset>
<p id="thanks"></p>
<legend>Send me a message</legend>
<div class="contact-info">
<input placeholder="Name*" type="text" name="name" required>
<input placeholder="Email*" type="Email" name="email" required>
</div>
<textarea placeholder="Message*" name="message" required></textarea>
<input type="submit" value="Submit" name="submitContact" class="button">
</fieldset>
</form>
<script>
function setReturn(){
localStorage.setItem("thanks", "Your request was sent successfully!");
}
document.getElementById("thanks").innerHTML = localStorage.getItem("thanks");
localStorage.clear();
</script>
Your issue is that when the innerHTML of the "thanks" element is set, the string in localStorage is unset.
Then when the form is submitted, the localStorage item is set, but the "thanks" element's innerHTML isn't set (it was set to undefined before).
In order to make sure the "thanks" element is updated when the form is submitted, you need to include the lines that set it in the function that fires when the form is submitted.
function setReturn(){
localStorage.setItem("thanks", "Your request was sent successfully!");
document.getElementById("thanks").innerHTML = localStorage.getItem("thanks");
localStorage.clear();
}
On form submit you are calling setReturn function , but when this snippet document.getElementById("thanks").innerHTML = localStorage.getItem("thanks"); is parsed localStorage does not have this key. So you have to first set this local storage before use it's value as innerHTML like in the previous answer.
Also it is odd that you are using localStorge and even you are clearing it, when this thing can be acheived by this snippet
HTML
<form id="contact-form" method="post" action="#" onsubmit="return setReturn()">
<input type="hidden" value="someone#email.com" name="emailTo">
<fieldset>
<p id="thanks"></p>
<legend>Send me a message</legend>
<div class="contact-info">
<input placeholder="Name*" type="text" name="name" required>
<input placeholder="Email*" type="Email" name="email" required>
</div>
<textarea placeholder="Message*" name="message" required></textarea>
<input type="submit" value="Submit" name="submitContact" class="button">
</fieldset>
</form>
JS
function setReturn(){
event.preventDefault()
document.getElementById("thanks").innerHTML = "Your request was sent successfully!";
}
NOTE: I used event.preventDefault just for demo but in real application you dont need to use it as it will prevent default behaviour or the submit button.
Here is a WORKING COPY
Also you can use an IIF to set up this localStorage.This function will be executed as soon as it parsed and will set up the key thanks to it.
(function(){
localStorage.setItem("thanks", "Your request was sent successfully!");
}())
Then onsubmit you can use your function without making any change
function setReturn(){
event.preventDefault();
document.getElementById("thanks").innerHTML = localStorage.getItem("thanks");
localStorage.clear();
}
WORKING COPY WITH IIF
Hope this is helpful
My code looks something like this -
<form name="myForm" ng-submit="!myForm.phone.$isEmpty(this.$viewValue)" action="/my/url" method="get">
<input name="phone">
<button type="submit">submit</button>
</form>
Now I can't submit the form even if I fill the phone number field.
But if I code like this :
<form name="myForm" ng-submit="!myForm.phone.$isEmpty(myForm.phone.$viewValue)" action="/my/url" method="get">
<input name="phone">
<button type="submit">submit</button>
</form>
Its perfectly working now.
So the difficulty is with 'this'. I cant even check the context of this, it should be the the context of $scope.myForm.phone, but somehow it isn't. Can someone please explain.
That's not what ng-submit is for. ng-submit is a function or expression called when the form is submitted. It's nothing to do with validation. If you want to ensure the text field is not empty before it's submitted you just need to add required and then if it is empty myForm.$invalid will be true.
Is this what you are trying to do:
html
<form name="myForm" ng-submit="submit(phone)">
<input name="phone" type="text" ng-model="phone.value" required>
<button type="submit" ng-disabled="myForm.$invalid" >submit</button>
</form>
controller
$scope.submit = function(phone){
console.log('phone', phone);
}
$scope.phone = {
value: ''
};
update
The this that you passed into the ng-submit is a reference to your controller. Since you have the name attribute set to myForm you can access the form model via this.myForm and the phone model via this.myForm.phone. So if you wanted to use $isEmpty to verify if the field is empty you would have to use:
this.myForm.phone.$isEmpty(this.myForm.phone.$viewValue)
ng-submit is used to provide a handler for the moment when the form IS submitted.
What you're looking for is disabling submit button with ng-disabled
<form name="myForm" ng-submit="functionInController()" action="/my/url" method="get">
<input name="phone" required>
<button type="submit" ng-disabled="myForm.$invalid">submit</button>
</form>
Pay attention to required directive added to the input. Which makes sure this field is not empty for submit