Hidden input fields causing modal form to be invalid - javascript

I have an angular js application in which I have a modal form to capture payment details. I am validating the input fields using angular required attribute as below.
<input name="cardNumInput" required type="text" size="20" class="form-control" ng-model="userInput.paymentParams.CardNumber" ng-minlength="13" ng-maxlength="19"/>
Certain fields are visible based on user selections. The requirement I have is that only the visible fields be validated with the required attribute. But it looks like even the hidden inputs are being validated. My submit button is enabled only if the whole form is valid. How do I tell angular to not validate the hidden fields.
http://plnkr.co/edit/8REV5ai52QylxuBbYCrn?p=preview
I also have the problem of not able to indicate the user that my dropdowns are also mandatory - by showing the red border like on input fields.

It doesn't matter for a validation if an input is visible or not. So try use ngIf in stead of ngShow
upd
for the select highlighting you can use the same approach as with inputs (set the class with ngClass directive), but Bootstrap has no error styles for the select element, so you should define your own (or you can just extend it you you are using less)
for example
select.has-error{ border: 1px solid #a94442;}
http://plnkr.co/edit/FMLxDKBkPkuHmtEvzMrL?p=preview

Related

ng-invalid in angular input just when submit

I have a interesting problem to solve, but I don't know how,
I have a dynamically inputs in my view, and the inputs in Angular are validated in realtime, but I don't want that, the angular inputs in input class "ng-invalid" and I want to add "ng-invalid" just when submit my form:
<div ng-if="conditionItem.field.id"
ng-class="{'error': FieldConditionsCtrl.feedback.type === 'error'}"
dynamic
input-router << Here is my how generates the inputs
source="conditionItem.field"
ng-model="conditionItem.situation[$index]">
</div>
When I modify the generated input, AngularJS inputs in my input class the following classes "ng-invalid ng-empty":
I want to add this classes just when submit to make the border red.
Any help for this issue?
Used the $submitted property of the ngFormController to qualify the setting of the error class.
ng-class="{error: form1.$submitted && form1.field1.$invalid}"
For more information, see
AngularJS Developer Guide - forms

Form validation in javascript when drop down dependency is involved

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

Angular Form Validation Using Ng-Required

FIDDLE HERE: http://jsfiddle.net/TegFf/48/
I have a form with radio buttons (please Fiddle below) that should validate if:
you choose a radio button that has a dollar amount associated
you choose custom AND enter a value
My problem, I think, is that the Ng-Required I have put on an input field is not properly registering whether it is or is not required.
<input name="donation" type="radio" value="yes" ng-model="manual" required="false">
<input type="number" ng-model="donation" ng-required="manual === 'yes'">
http://jsfiddle.net/TegFf/49/
Couple of things:
First radio input has a different name.
Wrapping the manual amount inside a label together with the radio button prevents you from focusing the field.
An AngularJS form is not valid until all fields are valid, so it's easier if you add more debug code to see which field is actually invalid.
Your first radio button needs to have 'name="donation"' added to it. Another issue is that once variable manual is set to 'yes', it will always stay yes. You should either reduce the number of your variables, or set up a custom validation in a directive.

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');

custom validation with jsvalidate

I'm using jsvalidate and I want to require some fields only when the user selects a yes (Sí) on my form here:
A required validation field on jsvalidate is implemented writing class="jsquerired" on the select element. How can I make class="jsquerired" appear if the user clicks "Sí" on my select?
Example:<input class="jsrequired jsvalidate_email texto" name="emailRecomendado" type="text" size="30"/>
It doesn't seem jsvalidate comes with conditional validation out of the box, so you will probably have to come up with a custom validation class for those fields that checks if "yes" was selected -- and if it was, return true (validation passed) if the field is not empty.

Categories