CODEWITHSUNDEEP
angularvmware-clarity
Max
Max

Reputation: 2040

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?

Upvotes: 1

Views: 7960

Answers (2)

Soumya Kanti
Soumya Kanti

Reputation: 1479

I worked out a solution that can work for you:

app.component.html:

<clr-main-container>
  <div class="content-container">
    <div class="content-area">
      <form class="form" (ngSubmit)="onSubmit()" [hidden]="submitted">
        <section class="form-block">
          <div class="form-group">
            <label for="technology">API Technology</label>
            <div class="select">
              <select class="form-control" name="technology" (change)="onChange($event.target.value)">
                <option value="" disabled>- Select an API Technology -</option>
                <option *ngFor="let technology of technologies" [value]="technology">{{technology}}</option>
              </select>
              <span class="tooltip-content" *ngIf="hide">
                  Technology is required.
              </span>
            </div>
          </div>
        </section>
      </form>
      <button class="btn btn-primary" type="submit">Add</button>
    </div>
  </div>
</clr-main-container>

app.component.ts:

export class AppComponent {
  public hide: boolean = true;
  public technologies = ["RPC", "SOAP", "REST"];

  onChange(technology) {
    console.log(technology);
    this.hide = false;
  }
}

Here is the Plunker: https://plnkr.co/edit/G5tuUCh1gc4xPTBiJWxe.

Upvotes: 1

Soumya Kanti
Soumya Kanti

Reputation: 1479

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.

Upvotes: 3

Related Questions