How to change the default message of the required field in the popover of form-control in bootstrap?

Question

 <form class="form-asd" role="form">     <h2 class="form-signin-heading">login</h2><hr />     <label class="control-label"  for="username">Username</label>     <input class="form-control" type="email"  required="" placeholder="username"data-error="enter username"></input>     <label class="control-label"  for="username">password</label>     <input class="form-control" type="password"  required=" " placeholder="Password"></input>     <label class="checkbox"></label>     <button class="btn btn-lg btn-primary " type="submit">submit</button> </form> 

how can we change this default message of popover of the require field "Please fill out this field "to "please enter username"

Answer 1

You can use setCustomValidity function when oninvalid event occurs.

Like below:-

<input class="form-control" type="email" required=""      placeholder="username" oninvalid="this.setCustomValidity('Please Enter valid email')"> </input> 

Update:-

To clear the message once you start entering use oninput="setCustomValidity('') attribute to clear the message.

<input class="form-control" type="email"  required="" placeholder="username"  oninvalid="this.setCustomValidity('Please Enter valid email')"  oninput="setCustomValidity('')"></input>