Input components that you include in your Visual Builder pages can have validations associated with them. For example they can require a value, force a specific format of data, or restrict range of valid values. These validation rules are executed at the client layer and are there to help ensure your customer provide valid values. But even though a value in a field might not be valid and show an error, other components on the page might still be active, so the user can for example press the "save" button and send invalid values to the backend.
One way to prevent this is to disable the save button (or any other relevant client component) until a valid value is in place.
To do this you can use a validation group JET component that will surround the fields that need to be valid. The validation group component tracks the validity of items and has a valid attribute whose value is going to be based on the status of the components included in the validation group. You can bind the valid attribute of the validation group to a VB variable, and use that variable to control the behavior of other components on the page.
In the video below we disable the submit button until all the fields on the form have valid values.
The code we are using is:
<oj-validation-group id="my1" valid="{{ $variables.validstatus }}">
<div class="oj-flex">
<oj-input-date label-hint="Date" class="oj-flex-item oj-sm-12 oj-md-6" min="2023-03-01" max="2023-03-31">
</oj-input-date>
</div>
<div class="oj-flex">
<oj-input-number label-hint="Number" class="oj-flex-item oj-sm-12 oj-md-6"></oj-input-number>
</div>
<div class="oj-flex">
<oj-input-text label-hint="Text" class="oj-flex-item oj-sm-12 oj-md-6" required="true"></oj-input-text>
</div>
</oj-validation-group>
<div class="oj-flex">
<div class="oj-flex-item oj-sm-12 oj-md-2">
<oj-button label="Button" on-oj-action="[[$listeners.buttonAction]]"
disabled="[[ $variables.validstatus !== 'valid']]"></oj-button>
</div>
</div>