how to add 'required' attribute to input field based on other fields values

Question

I have these input fields:

<input class="text_field" id="ProfilePhoneNumber" phone-by-state="User.PhoneNumber" type="text" required/>

<div class="btn-group">
    <button multi-select="User.Notifications.Phone" class="btn btn-default dropdown-toggle">
        Select Severities <span class="caret"></span></button>
    <ul multi-select-dropdown class="dropdown-menu">
        <li>
            <input type="checkbox" id="NotificationsPhone_1"
                   ng-model="User.Notifications.Phone.High">
            <label for="NotificationsPhone_1">High</label>
        </li>
        <li>
            <input type="checkbox" id="NotificationsPhone_2"
                   ng-model="User.Notifications.Phone.Medium">
            <label for="NotificationsPhone_2">Medium</label>
        </li>
        <li>
            <input type="checkbox" id="NotificationsPhone_3"
                   ng-model="User.Notifications.Phone.Low">
            <label for="NotificationsPhone_3">Low</label>
        </li>
    </ul>
</div>

<div><input id="SMS" type="checkbox"
       ng-model="User.SMS.Enabled">SMS Enable
</div>

I want to remove the 'required' attribute from the ProfilePhoneNumber text field and make it required only if at least 1 of these other checkboxes are checked.

Can I do it through HTML? angular? jquery? What is the best way?

Kalhan · Accepted Answer · 2015-10-12 12:56:56Z

5

you can use ng-required here

<input class="text_field" id="ProfilePhoneNumber" phone-by-state="User.PhoneNumber" type="text" 
    ng-required="User.Notifications.Phone.High == 1 || User.Notifications.Phone.Medium == 1 || User.Notifications.Phone.Low == 1 || User.SMS.Enabled == 1" />

ng-required will sets required attribute on the element if expression pass to ng-required sets to true.

edited Oct 12, 2015 at 12:56

answered Oct 12, 2015 at 12:51

Kalhan

21.9k8 gold badges71 silver badges96 bronze badges

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

Comments

Shamal Perera · Accepted Answer · 2015-10-12 12:55:16Z

0

You can use angularjs "ng-required"

<input class="text_field" id="ProfilePhoneNumber" phone-by-state="User.PhoneNumber" type="text" ng-required="User.Notifications.Phone.High || User.Notifications.Phone.Medium || User.Notifications.Phone.Low"/>

<div class="btn-group">
    <button multi-select="User.Notifications.Phone" class="btn btn-default dropdown-toggle">
        Select Severities <span class="caret"></span></button>
    <ul multi-select-dropdown class="dropdown-menu">
        <li>
            <input type="checkbox" id="NotificationsPhone_1"
                   ng-model="User.Notifications.Phone.High">
            <label for="NotificationsPhone_1">High</label>
        </li>
        <li>
            <input type="checkbox" id="NotificationsPhone_2"
                   ng-model="User.Notifications.Phone.Medium">
            <label for="NotificationsPhone_2">Medium</label>
        </li>
        <li>
            <input type="checkbox" id="NotificationsPhone_3"
                   ng-model="User.Notifications.Phone.Low">
            <label for="NotificationsPhone_3">Low</label>
        </li>
    </ul>
</div>

edited Oct 12, 2015 at 12:55

answered Oct 12, 2015 at 12:51

Shamal Perera

1,6911 gold badge18 silver badges22 bronze badges

1 Comment

ryeballar Over a year ago

You should change | to || operator. The | operator in angular is only useful for filters.

Collectives™ on Stack Overflow

how to add 'required' attribute to input field based on other fields values

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related