Form validation in javascript when drop down dependency is involved - javascript

I have used ng-disabled for my form validation for ADD button.
i.e. ng-disabled="conditionForm.$invalid". But , My form contains two text boxes which are hidden at first , and when a type is selected from drop down , only the respective Text box div should be visible. The Problem i'm facing is ,when the above ng-disabled validation is used , the ADD button is still disabled when one of the text box is selected and an input is provided. After the second input is also selected from the drop-down , then the ADD button is getting enabled.
Can you please provide me with an alternate validation , where the ADD button can get enabled every time a value is selected from drop down and a valid input is provided.

If you're ng-disabled is on a form being valid or invalid it sounds like those may have required inputs set. If that is case look at using ng-required so you can explicitly set required based on expression. You can then control when the form is valid.
The exact answer: Answer

Related

Model.reject() results invalid fields in extjs form

I'm using Extjs 5.1.
I have a form which is bind to view model.
My form has few mandatory fields.
To reset form values am using model.reject() method.
When I enter a value in mandatory field and click reset button, it results invalid field with red colour border.
I have created a fiddle here for your reference. You can test this by entering a value into the input field and then click on reset button. Then field becomes invalid with red colour border.
How to get rid of this invalid field issue on reset ?
set Custom panel to extend Ext.form.Panel instead of Ext.Panel
add me.reset() in line 62, after co.reject();

Removing required from a form element via Javascript

I have a form that hides and shows option based on a drop down. If one option is selected there is a form that had required fields (). If the other option is selected I need to disable those required fields or the form won't submit.
Long and short. How do I remove the required for the input element via Javascript?
I was trying document.getItemById('firstName').?
document.getElementById('firstName').removeAttribute('required');

jQuery validate skipping the second input field

I've got three form fields, two inputs and one textarea. When I hit the submit button before entering any data my browser says the first input field and the textarea must be entered, but the second input field is ignored. Does anyone got an idea how I should fix this?
Posted the code on http://jsfiddle.net/D5tk4/
Thanks!
Your input fields have id attributes but not name attributes. Inputs need to have name attributes.
http://jsfiddle.net/petersendidit/D5tk4/2/

What changes to DOM are made when MVC Validation triggers?

I have a form in a modal window that is currently performing some validation.
(I am using ASP.NET MVC, JQuery UI, ajax forms, data annotations and unobtrusive is active)
When this validation triggers I have noticed so far that it does a few things:
1: my validation summary gets it's class changed from .validation-summary-valid to .validation-summary-errors
2: my invalid inputs have a class added to then called .input-validation-error
3: my validation messages get their class changed from .field-validation-valid to .field-validation-error
But there is something else that it is doing and I cant work out how it is tracking this.
I have a textbox that is required, before triggering the validation i can select inside this box, then select another box and the validation will be silent.
But as soon as i trigger the validation by clicking submit with an empty textbox, i can select the textbox and type something to remove the validation instantly, but if i then null it and select a different box this error is re-applied without re-submitting.
So my question is: what has changed, how does it know that I have attempted to submit already?
When validate is called, it adds a class to each input/select that is supposed to be validated. When the input/select is not valid it adds a class to the input/select:
class="input-validation-error"
When it is valid, it adds:
class="valid"
Validation only fires on the control when you change the value, not when it loses focus.
Validation fires on change, even before you submit the form. Take a required textbox, add a value to it, and tab off ... then go back and remove that value, and you should see the textbox highlighted red.

Lotus-Notes: Reset Radiogroup via Javascript

I'm currently working on a Lotus Notes solution. We're just using Web forms so client side operations are done via Javascript.
What I want to accomplish is to reset a Group of Radio Buttons. There are 3 possibilities and I want to choose none. (A 'none of them' possibility would be preferable, I know but we are required to reset them)
I currently use:
//Unchecks a single group of Radio Buttons
//groupname - the name attribute of the group which selection needs to be unchecked
function clearRadioButtonGroup(groupName) {
for(i=0;i<document.forms[0].elements[groupName].length;i++) {
document.forms[0].elements[groupName][i].checked = false;
}
}
The problem with this routine is, the Radiogroup gets reset, but on a form submit the old value gets submitted. Any suggestions?
What version of Domino are you using? Since 7.x (I think) a %%Surrogate field gets generated as a hidden field in your HTML that you'll be able to reset, so after deselecting all of the radio button options, you can then clear out the %%Surrogate field and you should then avoid having to select a "None of the above" option.
Matt
The problem is that clearing the radio buttons make no information about them appear in the submitted form data, and Domino seems to interpret that as no change to the field rather than clear the field.
I haven't found any solution to this I really like, but I can think of two options:
Change the radio buttons to include a no choice option.
The alternative is a bit clumpsy:
Add an editable field to the form to use as a flag, hide it from the web browser with css.
Have clearRadioButtonGroup also set the flag field to something.
Have the onChange event of the radio buttons clear the flag field.
In a WebQueryOpen agent, set the radio buttons field to empty if the flag field is non-empty.
Another alternative could be to uses some clever javascript/css trick to hide the no choice option and have clearRadioButtonGroup simply set that choice.
Are you certain that the old value is actually being submitted? Perhaps it just isn't being updated (erased) in the NotesDocument you're editing? Just a hunch...
BTW, you can download a program called Fiddler that will let you inspect the HTTP POSTs, and you can confirm that the POST data doesn't contain any values for that radio button group. That might help narrow down the problem.
Put the following pass thru HTML code on your form:
<input type="hidden" name="FieldName" id="FieldID" value="">
(FieldName and FieldID are the name and id of your radio field on the form)
When you reset your radio through Javascript and submit your document, the field will be reset to blank.

Categories