I have encountered an issue where the value of a submit button is not being submitted with the form data. This is happening because of parsley. After some more troubleshooting I have discovered that if I make use of the script parsley.js and not parsley.remote.js, the issue is not there anymore.
Note: This issue only happens in Internet Explorer and Firefox, while in Chrome everything works just fine.
Working example
Here is an example in plunkr which demonstrates that with the script - parsley.js, this issue does not happen in neither of the browsers, see: http://plnkr.co/edit/0ylxasiyrlxhSrhrMaFH?p=preview
This means that if we run the above plunkr in any browser and enter anything in the text box and then click on submit, the submit button value is going to change from "undefined" to "submitBtn" as it should.
Not working example
Here is another example in plunkr which demonstrates that with the script - parsley.remote.js, there is this issue in both Firefox and Internet Explorer, while it is fine in Chrome, see: http://plnkr.co/edit/ODqZannjYFBEwppXOXiF?p=preview
This means that if we run the above plunkr in either internet explorer or firefox and enter anything in the text box and then click on submit, the submit button value is never going to change to "submitBtn" as it should, but instead it will always stay "undefined".
Anybody has ever encountered this problem or have a solution? Thanks a lot.
I'm encountering the same issue under certain circumstances using the current version of Parsley (2.2.0-rc1) which was supposed to fix this (see here: https://github.com/guillaumepotier/Parsley.js/pull/947#diff-for-comment-36081575)
It happens for me when 1) I have a form with a parsley-remote validated field, and 2) the remote validator isn't called until I've already clicked the submit button on the form.
Example -- I have a form where a user can change their username, like so:
<form id="profile-username" action="/profile" method="post" role="form" data-parsley-validate>
<input type="text" name="username" value="{{ username }}" maxlength="255" required
data-parsley-type="alphanum"
data-parsley-trigger="change"
data-parsley-remote="/api/checkuser"
data-parsley-remote-reverse="true"
data-parsley-remote-message="Username already taken"
data-parsley-type-message="Username can only contain letters A-Z and numbers 0-9" >
<input type="password" name="password" required minlength="6" maxlength="150">
<input type="submit" name="submit" value="Change Username">
If I change the value in the username field, it triggers the remote validator. Later when I click submit, the form will submit including the value of the input [type=submit] as expected.
However if I don't change the value in the username field and just submit the form as is, the remote validator is still called (after I've already clicked submit) but the form posts without a value for submit, which is not what I want.
It seems to be a timing issue... I'm thinking Parsley is doing things with the submit button behind the scenes which don't have a chance to finish in the time between the user clicking 'submit' and the browser going on to the next page.
Bottom Line: In any case it may just be safer to use an input type="hidden" to pass whatever value you need, instead of relying on the value of submit being there.
Related
I'm having severe issues with inputs using ng-model in IE (11 and all previous versions,) but everything is working correctly in all other browsers. This issue was first observed last week. We have made no updates to this section of our application and heard no reports of users having this issue prior to last week.
We are running Angular 1.4.3.
Basically, inputs like this one:
<input data-ng-model="answer.value"></input>
Are not correctly updating the model. It looks like an issue with onChange or onFocus events - the inputs never lose their ng-pristine and ng-untouched classes. They are properly displaying the initial value from the model but any updates made by the user simply fail to save. We've experimented with adding a <meta http-equiv="X-UA-Compatible" content="IE=11" /> tag to our head to no avail. Removing all validations from the inputs makes no difference. There are no console errors or alerts.
In my case, I had a parent component, and a child input.
The parent component had a poor choice of Angular binding attribute; I called the attribute "disabled". disabled was a bad choice of custom attribute name because that is a standard attribute for many HTML elements.
When I changed the custom attribute name to "custom-disabled", the child inputs started responding.
Internet Explorer interpreted some ancestor disabled attribute to mean all descendants should be disabled; therefore my angular input ng-model, ng-change, ng-blur, ng-focus were not working.
I should've known: when I asked $('input').is(':disabled'), the result was true. I ignored this because the input element itself didn't have the disabled attribute; only an ancestor element did!
I had simillar problem and solution seems to be easy. If you have code similar like this:
<form name="myForm">
<table ng-disabled="formToggle">
...
<input ng-model="form.name" />
...
</table>
</form>
IE10, IE11 won't check fields and won't set their pristine dirty values on form (other browsers works ok). Just remove ng-disabled (from table in this case and in other case from parent element) and it will work.
I am using angular-unsaved Changes directive as well as the angular built in form controller to detect if a form is $dirty.
I have a form on a specific page that even though I edit elements, the form never registers as dirty. I have gone so far as to strip everything and leave only:
<form unsaved-warning-form class="form-horizontal" name="WHAT">
<input type="text" name="thematif" id="thematiff" class="form-control" >
</form>
The formis never $dirty even when I change the value of the input. Any ideas what the problem could be causing the changes to input not to be detected? Is it that there should be an angular input equivalent tag instead of a plain old "input"?
What could be disabling the detection?
Ng-model is missing on your input field.
Validations and all form enhancements are provided by utilizing ng-model directive (and its controller). So add ng-model and everything is Ok.
See: http://jsbin.com/podepo/edit?html,output
<form unsaved-warning-form class="form-horizontal" name="WHAT">
<input type="text" name="thematif" ng-model="whatever" >
<pre>{{WHAT|json}}</pre>
</form>
I'm building a simple form using AngularJS Messages.
Basically what I want to happen is:
User submits form, all appropriate errors show and prevents
submission
User then completes fields and errors hide one by one after 'focus out' of field ($touched ?)
First point is working fine but I can't figure out the second part, I can't hide the error messages at all afterwards. I'm sure I'm missing something simple but other related questions aren't really helping too much.
Any ideas?
<form name="orderForm"
ng-submit="orderForm.$valid && placeOrder()" novalidate>
<input type="text"
ng-model="orderParams.delivery_address.full_name"
name="fullName" required />
<p ng-message="orderForm.fullName.$error"
ng-if="orderForm.fullName.$invalid && orderForm.$submitted">
This field is required</p>
<input type="submit" value="Submit" />
</form>
For me the problem was solved by adding ngMessgaes to my module dependencies.
I installed had it installed with bower before, but forgot to add it to module dependencies. For some reason it caused no errors. It only prevented my error messages from hiding.
you need to do three things:
1. add a boolean variable in your controller like: "showMessageBox" which is set to true.
2. when you submit you set "showMessageBox" to false.
3. on your message box you put the ng-show directive and bind it to "showMessageBox" variable
I actually just figured this out. I'm using Angular 1.4.2 and it would seem that Angular Messages is now part of the core build which I didn't pick up on before (I'd just forgotten to inject into the angular module), removed the angular-messages.js file (which was probably causing conflicts) and the above code works fine.
Anyone know why the seperate module is still available on code.angularjs.org? - https://code.angularjs.org/1.4.2/
I have the following code
<div class="form-group" show-errors ng-show="contact.ContactType === 'LegallyMarriedSpouse' || contact.ContactType === 'Self'">
<label class="control-label">Social Security Number</label>
<input type="text" class="form-control" ng-model="contact.SSN" ui-mask="999-99-9999" name="SSN" maxlength="50" required />
</div>
I would have thought that Angular would have made sure that the hidden field was no longer required however that is not the case. although the user can't see it it's clearly still stopping the form from being submitted because I see the following error in the console.
An invalid form control with name='SSN' is not focusable.
So - the question is how do I handle this? If it's displayed I want it to be required if not obviously we can't try and force the user to fill out the values.
2 solutions:
use ng-if rather than ng-show to remove the input from the form rather than hiding it
instead of required, use ng-required="contact.ContactType === 'LegallyMarriedSpouse' || contact.ContactType === 'Self'" to make it required only when the condition showing the field is true. You should put that complex condition in a scope function though, to avoid duplicating it.
Note however that even if the form is invalid, it can still be submitted, unless you're explicitely preventing it by disabling its submit button when the form is invalid. I don't think the error you're seeing has anything to do with the form being invalid.
Also note that the second solution will only deal with the field being required. If the value inside the field is too long or doesn't match with the mask, the field will stay invalid. So you should probably use the first solution.
I'm using angular-auto-validate and am having some state management issues. I have a multipart form where some fields are required (name/email address) and the user is able to go "back" to change answers. Basically, I have a partial for every stage in the form which is working well, with one exception. The continue button is disabled if the field is invalid. I tried simply using the $valid identifier, but when the partial loads, each field begins with ng-valid so I can either use $touched or $pristine. Problem is, when the user goes back, the value that has binded to a data source is valid, but the field isn't touched so the continue button doesn't activate. Sample code (this is generated code after I've hit the "back" button):
<input type="text" name="name" ng-minlength="3" ng-model="myModel" placeholder="Your First Name" ng-focus="inputFocused()" ng-pattern-err-type="" ng-model-options="{updateOn: 'blur'}" class="ng-valid ng-valid-pattern ng-valid-minlength">
and the button:
Continue
How can I either disable the default ng-valid or identify a condition where the value is being populated by the controller?
I think you should use ng-dirty/pristine. You can manually set the condition of the form as the user navigates.
When you populate your form data you can do something like:
if($scope.myForm.data) {
$scope.myForm.$setDirty
}
Your button:
Continue