Mandatory checkbox in HTML in custom widget

[Hafsa1]

HTML-----

<div class="col-md-12">
<div class="col">
<input type="checkbox" ng-model="c.formInput.emailCheck" name="email" id="email" ng-disabled="c.formInput.postCheck"> {{data.messages.email}}
</div>
</div>
<div class="col-md-12">
<div class="col"> <input type="checkbox" ng-model="c.formInput.postCheck" name="post" id="post" ng-disabled="c.formInput.emailCheck"> {{data.messages.post}}
</div>
</div>

---------------------------------

Output:-

I have two checkbox in HTML, want to make it mandatory. Means atleast one of these checkbox must be selected. what to change in html

[Me Being Mustaq]

Hi @Hafsa1 ,

 

To make sure at least one of the two checkboxes is selected (i.e., mandatory that the user checks either emailCheck or postCheck), you need to add validation logic. AngularJS does not natively support cross-field validation in the template, so generally you add such validation in your controller or by using AngularJS form controls.

However, if you want a simple HTML/AngularJS way that shows an error message if none are checked,

Add a <form> wrapper and ng-submit handler, and create a custom validation message bound to a scope expression checking if both are false (i.e., none selected)

<form name="checkboxForm" novalidate ng-submit="c.submitForm()">

<div class="col-md-12">
<div class="col">
<input type="checkbox"
ng-model="c.formInput.emailCheck"
name="email" id="email"
ng-disabled="c.formInput.postCheck"
required> {{data.messages.email}}
</div>
</div>

<div class="col-md-12">
<div class="col">
<input type="checkbox"
ng-model="c.formInput.postCheck"
name="post" id="post"
ng-disabled="c.formInput.emailCheck"
required> {{data.messages.post}}
</div>
</div>

<div ng-show="!c.formInput.emailCheck && !c.formInput.postCheck && checkboxForm.$submitted" style="color:red;">
Please select at least one option.
</div>

<button type="submit">Submit</button>

</form>

 

• The checkboxes have required (to mark them as required fields).

• The error message is shown if both are unchecked after the form is submitted.

• checkboxForm.$submitted ensures the message appears only after submit attempt.

• You can handle the actual validation in your controller c.submitForm() by checking that emailCheck or postCheck is true

If it is helpful, please hit the thumbs button and accept the correct solution by referring to this solution in the future it will be helpful to them.

 

Thanks & Regards,

Mohammed Mustaq Shaik

[Hafsa1]

we already have submit button, can't we use that button to validate

[Me Being Mustaq]

Assalamualaikum @Hafsa1 c,

Yes you can use that button as validate

If it is helpful, please hit the thumbs button and accept the correct solution by referring to this solution in the future it will be helpful to them.

Thanks & Regards,

Mohammed Mustaq Shaik - ServiceNow Consultant - Lets connect on Linkedin:https://www.linkedin.com/in/shaik-mohammed-mustaq-43ab63238/

[Ankur Bawiskar]

@Hafsa1 

any reason you used widget for this?

You can have normal checkbox variables in your catalog item and then use onSubmit catalog client script to validate the mandatory logic.

💡 If my response helped, please mark it as correct ✅ and close the thread 🔒— this helps future readers find the solution faster! 🙏