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

81

 <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 valid 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"

This question is tagged with html css twitter-bootstrap

~ Asked on 2014-06-24 15:49:52

The Best Answer is


197

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>

~ Answered on 2014-06-24 17:35:53


22

Combination of Mritunjay and Bartu's answers are full answer to this question. I copying the full example.

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

Here,

this.setCustomValidity('Please Enter valid email')" - Display the custom message on invalidated of the field

oninput="setCustomValidity('')" - Remove the invalidate message on validated filed.

~ Answered on 2017-04-11 18:47:28


Most Viewed Questions: