Form validation in javascript when drop down dependency is involved

Question

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.

please show us your code

Muhammad Adeel Zahid
– Muhammad Adeel Zahid

2015-12-01 07:18:18 +00:00
Commented Dec 1, 2015 at 7:18 — Muhammad Adeel Zahid
– Muhammad Adeel Zahid, Commented Dec 1, 2015 at 7:18

Raffaele Rizzetti · Accepted Answer · 2015-12-02 10:33:22Z

1

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: <a href="http://jsfiddle.net/yuobrupr/2">Answer</a>

edited Dec 2, 2015 at 10:33

answered Dec 1, 2015 at 7:41

Raffaele Rizzetti

516 bronze badges

Sign up to request clarification or add additional context in comments.

19 Comments

Fayaz shaik Over a year ago

ng-required does not work.It keeps the ADD button in enabled state only.

Raffaele Rizzetti Over a year ago

Just incase it wasn't clear the ng-required would not go on the add button but it would go on the hidden text areas

Fayaz shaik Over a year ago

yeah . but , i was asking about the validation for ADD button in the form. I'm facing the issue in ADD button enable/Disable situation. When first option is selected from drop down, its text box appears and i have given a valid input into it.Still the ADD button is in disabled state.

Raffaele Rizzetti Over a year ago

That is exactly what my original solution was doing. I've updated it by adding in labels for the different textareas to make it more clear. hope this helps jsfiddle.net/yuobrupr/1

Raffaele Rizzetti Over a year ago

apologies i see the error.. i've added a min length this should then prevent it from being empty... jsfiddle.net/yuobrupr/2

|

Collectives™ on Stack Overflow

Form validation in javascript when drop down dependency is involved

1 Answer 1

19 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

19 Comments

Your Answer

Sign up or log in

Post as a guest

Related