CODEWITHSUNDEEP
javascriptvalidationangularjs
Jezcentral
Jezcentral

Reputation: 422

AngularJS clientside validation: Changing validation requirements depending on other fields?

I want to validate my fields using AngularJS's own form validation. However, I only want to check some of the fields when other fields have data. E.g.

<form novalidate name="myForm" ng-submit="submitThisForm()">

    <h1>Shipping address</h1>
    <!-- These are the inputs -->
    <input name="sAddress1" type="text" ng-model="sAddress1" required>
    <input name="sAddress2" type="text" ng-model="sAddress2" required>
    <input name="sAddress3" type="text" ng-model="sAddress3">
    <!-- These are the errors -->
    <div class="error" ng-show='(myForm.sAddress1.$invalid) && myForm.submitted'>Required</div>
    <div class="error" ng-show='(myForm.sAddress2.$invalid) && myForm.submitted'>Required</div>

    <h1>Billing address (if different)</h1>
    <!-- These are the inputs -->
    <input name="bAddress1" type="text" ng-model="bAddress1" required>
    <input name="bAddress2" type="text" ng-model="bAddress2" required>
    <input name="bAddress3" type="text" ng-model="bAddress3">
    <!-- These are the errors -->
    <div class="error" ng-show='(myForm.bAddress1.$invalid) && myForm.submitted'>Required</div>
    <div class="error" ng-show='(myForm.address2.$invalid) && myForm.submitted'>Required</div>

</form>

Basically, the Billing address is optional, but once any part of it is filled in, bAdress1 and bAddress2 become Required. How do I achieve this?

(The variable myForm.submitted is set to false on page load, and then set to true when the form is submitted, so it only shows once validation has taken place.) I prefer vanilla JS answers, but I am using jQuery for this project, so that is also okay.

EDIT: Here's the answer with a pretty, formatted layout:

In the HTML file:

<input name="bAddress1" type="text" ng-model="bAddress1" ng-required="doWeNeedThis()"/>
<input name="bAddress2" type="text" ng-model="bAddress2" ng-required="doWeNeedThis()"/>
<input name="bAddress3" type="text" ng-model="bAddress3"/>

In the JS file:

$scope.doWeNeedThis = function() {
    if((document.getElementsByName("bAddress1")[0].value != "")
        || (document.getElementsByName("bAddress2")[0].value != "")
        || (document.getElementsByName("bAddress3")[0].value != "")) {
        return true;
    } else {
        return false;
    }
};

Many thanks to Davin for the quick (and complete) answer.

Upvotes: 1

Views: 262

Answers (1)

Davin Tryon
Davin Tryon

Reputation: 67316

ng-required will allow you to run an expression to determine whether the field is required or not.

<input name="bAddress1" type="text" ng-model="bAddress1" ng-required="doWeNeedThis()">

ng-required is documented with form.

So, in your example, you could implement doWeNeedThis() function in your controller and check the values of your model to determine if the input should be required or not.

Otherwise, in simple cases, you can just write the expression directly into the ng-required expression:

<input name="bAddress1" type="text" ng-model="bAddress1" ng-required="bAddress1 || bAddress2">

Upvotes: 3

Related Questions