How can I change generic tool tip in HTML5 for input angular form field

I am using Angular2 form. Mostly all validated using html pattern and some are form validated. For html validation, I am getting generic tooltip "Please enter a valid format" for phone without saying the format. How can I change it to "Please enter 10 numeric values."


   <div class="row form-group">
             <div class="col-xs-12">
                <div class="float-label active">
                      <input type="text" class="input-underline-blue" id="phone" formControlName="phone"
                       placeholder="(123) 345-2222"
                         pattern="(?:\([1-9]\d{2}\)|\d{3})[- ]?\d{3}[- ]?\d{4}"              
                         required />
     <label for="phone">@Html.Sitecore().Field("Phone Label", profileItem)</label>
    <div *ngIf="!editInfoForm.get('phone').valid" class="alert alert-danger alert-small">
     <span *ngIf="editInfoForm.get('phone').hasError('required')">
                                                        @Html.Sitecore().Field("Phone Required", profileItem)
      <span *ngIf="!editInfoForm.get('phone').hasError('required') && !editInfoForm.get('phone').valid">
      Enter a valid phone number.
Karthey SundaremDeveloperAsked:
Who is Participating?
Julian HansenCommented:
Add the novalidate attribute to your form
<form ... novalidate>

Open in new window

To turn off default validation - then add angular error message with ngIf
<div *ngIf="phone.invalid && (phone.dirty || phone.touched)">
   Please enter 10 numeric values

Open in new window

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.