Search code examples
angularvmware-clarity

How to do form validation for a select box?

I am trying to provide an error message when users do not pick a value on the select box. The VMware Clarity documentation is pretty clear when we are dealing with <input type="text"> elements (click here), which says:

You can use validation styling for input fields by wrapping the input tag in a container with the .tooltip class along with the .tooltip-validation class. Use the .invalid class on the .tooltip-validation container to toggle the validation styling. Place the .tooltip-content after the input tag.

There is no documentation explaining how we should do validation with select boxes (click here).

So, I tried the following:

<div class="form-group">
    <label for="technology">Technology</label>
    <div class="select tooltip tooltip-validation tooltip-sm invalid">
        <select formControlName="technology">
            <option value=""
                disabled>- Select an API Technology -</option>
            <option *ngFor="let technology of technologies"
                [value]="technology">{{technology}}</option>
        </select>
        <span class="tooltip-content">
            Technology is required.
        </span>
    </div>
</div>

Here is the result that I am getting:

enter image description here

Notice that the tooltip icon is there, but when the user clicks, it does not show the desired content "Technology is required"

My question is: What is the best practice to do validation with select boxes?

Solution

  • IMO, you do not need validation of any kind with select boxes. The reason being, for a select box you do specify what can be the possible selections and the user must select one of them.

    Keep it simple: you do not need to show the extra option <option value="" disabled>- Select an API Technology -</option>. Just show the available technologies.

    If you really want, you can show a static warning. Check this plunker: https://plnkr.co/edit/gCgmzU.