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

MILO PADILLA
  • 3
  • 2
dpndra
  • 2,098
  • 4
  • 23
  • 29
  • 1
    [This codepen](https://codepen.io/anon/pen/oeaqWY) does exactly this. – zelusp Aug 28 '17 at 18:05
  • See also [changing the language of error message in required field in html5 contact form](https://stackoverflow.com/questions/10753881/changing-the-language-of-error-message-in-required-field-in-html5-contact-form), nearly identical question, the only real difference being this question mentions bootstrap. – faintsignal Feb 04 '19 at 00:29

5 Answers5

243

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.

<form action="/action_page.php" method="post">
  <input class="form-control" type="email"  required="" placeholder="username" oninvalid="this.setCustomValidity('Please Enter valid email')" oninput="setCustomValidity('')"></input>
  <input type="submit" value="Submit">
</form>
Akbarali
  • 688
  • 7
  • 16
Mritunjay
  • 25,338
  • 7
  • 55
  • 68
  • 9
    Best explained here: http://www.html5rocks.com/en/tutorials/forms/constraintvalidation/ – David Costa Jun 17 '15 at 08:41
  • 18
    after i add this code i get my message shown, but then after entering some text in the input, i still have this message shown until I refresh. – pera Jun 27 '16 at 10:48
  • 11
    in order to use this method, you need to clear the customValidity message after input, or it keeps showing that error message even if its valid. oninput="setCustomValidity('')" fixes this issue when used with oninvalid. – Bartu Aug 14 '16 at 17:28
  • 1
    Is there any way to differentiate between a user leaving a field empty and a user inputing an invalid email? Can I edit both the required error message and the invalid email error message? – ariebear Nov 19 '18 at 19:49
  • can this be done to all inputs not just in some pages ? – Youssef Boudaya Jan 29 '19 at 13:22
  • This is working but how to change: "Please include an '@' in the email address. '' is missing an '@'...... Any suggestions? – Roga Men Jan 31 '19 at 18:22
  • I really had lots of problems trying to implement his kind of solution ... I just couldn't ... I think it's messy.. I prefer to do some other way... – Felipe May 01 '20 at 09:52
  • @Mritunjay sorry for commenting despite the answer was already accepted, is there any way to show the error message on the label instead of the input? I already asked a question here: https://stackoverflow.com/q/65030844/5792426 – ladhari Nov 27 '20 at 01:00
31

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.

0190198
  • 1,667
  • 16
  • 23
9

And for all input and select:

$("input[required], select[required]").attr("oninvalid", "this.setCustomValidity('Required!')");
$("input[required], select[required]").attr("oninput", "setCustomValidity('')");
Stepan Tripal
  • 651
  • 6
  • 7
1

I wanted to change the text of the textarea. This method helped

<form action="/action_page.php" method="post">
  <input type="text" required placeholder="username" oninvalid="this.setCustomValidity('Error validate')" oninput="setCustomValidity('')">
  <br><br>
  <textarea placeholder="Ko’cha, uy, xonadon" name="address" required oninvalid="this.setCustomValidity('Majburiy maydon')" oninput="setCustomValidity('')"></textarea>
  <input type="submit" value="Submit">
</form>
Akbarali
  • 688
  • 7
  • 16
-2

$("input[required]").attr("oninvalid", "this.setCustomValidity('Say Somthing!')");

this work if you move to previous or next field by mouse, but by enter key, this is not work !!!

APH
  • 29
  • 7