We Keep Coding

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

Hidden input fields causing modal form to be invalid

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

Jquery Validation Plugin - Fields still producing errors

I have a checkbox field which determines whether the proceeding client ID field has an attribute of data-validate required:true, or data-validate required:false which drives my forms validation.
<input type="text" name="stID" id="stID" data-validate="required:true" />
Using jquery i can change the requirement in real-time, along with show/hide and add/remove the error classes associated with that field.
$("#input[name='stID']").attr("data-validate","required:false");
var form=$("#standard");
form.validate().resetForm();
The issue lies when someone tries to submit the form, then changes the initial checkbox option (if true, ID isn't required otherwise if false, ID is required).
When this happens, despite the data-validate required:false being set and the error classes being hidden, the validation is still occurring and flagging the stID field.
Does the jquery validator plug in have a cache/array of fields which resulted in errors that it determines on submit and possibly isn't being cleared/reset when the resetForm function on our validation is called?

Found the solution, still needed to clear the data attribute associated with these fields producing errors after changing its requirement. This was done by
$("#stID").removeData();

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.

HTML5 Browser Validation - 1 form, 2 buttons, need to change validation

I have a form with two buttons - one is a "submit" button at the end of the form, and in the middle of the form I have an "Add" button that uses Javascript to add hidden input elements within the form whenever it's clicked.
Here are the two input fields/add button:
<input name="name" required>
<input name="email" required type="email">
<button type="submit">Add</button>
And then another set of input fields:
<input name="title" required>
<button type="submit">Submit</button>
And these are all within one form.
I want HTML5 browser validation to fire on the "name" and "email" fields when I click "Add" (but not the "title" field) and the browser validation to fire on the "title" field (but not the "name" and "input" fields) when I click "Submit." Is there any way to accomplish this?

You can add or remove attribute "required" to the fields to which you required by
$('#field_id').attr('required','true');
$('#field_id').removeAttr('required');

Is there any particular reason that you want to use HTML5 to validate your form in the first place? I feel like what you need would be easily accomplished using Javascript, and you noted that your add button would be using javascript anyway. Also, why would your form validation to be partitioned in such an odd way?
I don't even like the HTML5 validation in the first place. For example, if you type in "asdf#1" into an HTML5 email input, it will accept it. Now, you can make the argument that that's technically a valid email address, but I think in practice most people would agree that they wouldn't accept that as a valid email address. You could use an IP address in place of the domain but I highly doubt that you could use that as an email to log into any modern web page.
But I digress. To answer your question, you could write a quick function with JQuery that would override the form validation based on which button was clicked. You would do this by catching the "invalid" error thrown by the HTML5 validation for that particular input and returning false to get around it. Therefore, when you clicked submit you could override the name and email form validation, and vice versa for when you click the add button. Again, I have no idea why you would want to do this but it is a solution.

The only way I see is to set the required attributes (or: properties) dynamically on-click.
Or you can add and remove event listeners for invalid, which seem to suppress the native "missing"/"wrong format" notice - even if they do nothing (like preventDefaultAction or so).
I also tried buttons with the formnovalidate attribute and manually checkValidity() on the elected elements, but even though that fires "invalid"-events no native dialogue is shown and the submit is not cancelled. (tested everything with opera)