I've implement localization in my application, all this stuff is saved inside a php file. So I can easy do this:

<input class="form-control" type="text" required="" placeholder="username" oninvalid="this.setCustomValidity('<?php echo $this->lang->line('field_required'); ?>')"></input>

Now if I doesn't enter any text I can see the custom message, but if I fill the input I see again the popup as the form can't get the text inside.

It's a bug of Bootstrap?

EXAMPLE

/

I've implement localization in my application, all this stuff is saved inside a php file. So I can easy do this:

<input class="form-control" type="text" required="" placeholder="username" oninvalid="this.setCustomValidity('<?php echo $this->lang->line('field_required'); ?>')"></input>

Now if I doesn't enter any text I can see the custom message, but if I fill the input I see again the popup as the form can't get the text inside.

It's a bug of Bootstrap?

EXAMPLE

https://jsfiddle/DTcHh/23662/

• javascript
• php
• html
• twitter-bootstrap

• i'm able to see the popup even after entering text. – Iceman Commented Aug 14, 2016 at 8:43
• @Iceman Infact, this is the problem – user3287550 Commented Aug 14, 2016 at 9:02
• wud you be interested in another method. oninvalid is not cross-browser gr8. for ex. safari doesnt support it. – Iceman Commented Aug 14, 2016 at 9:16
• @Iceman which method? Tell me please, I also found a workarounf, check my answer, but hope to see best answer. – user3287550 Commented Aug 14, 2016 at 9:19
• 1 Sure. i'll add an answer – Iceman Commented Aug 14, 2016 at 9:25

3 Answers 3

Using the onvalid won't work in some browsers like Safari or IE below 10. Use a custom event notifier for attaching the function.

Note: As you mentioned in the ment you can print the message from the data-invalid-message attribute from php and catch it using jQuery by .data('invalidMessage').

SEE WORKING EXAMPLE:

var myobj = jQuery('input.form-control');
myobj.on('keyup keypress blur change input', function() {
  var messg = ($(this).data('invalidMessage'));
  if (this.validity.typeMismatch) {
    this.setCustomValidity(messg);
  } else {
    this.setCustomValidity('');
  }
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn./bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://netdna.bootstrapcdn./bootstrap/3.0.0/js/bootstrap.min.js"></script>
<form>
  <input class="form-control" type="email" required placeholder="username" data-invalid-message="custom message from php here">
  <button type="submit">
    go
  </button>
</form>

a workaround that I've found is:

onkeyup="this.setCustomValidity('');

the bug will be gone now.

TL&DR Check element.validity.typeMismatch and then element.setCustomValidity('custom error msg') or element.setCustomValidity('') if there's no mismatch. You should listen on both keyup and blur events.

Explanation in Mozilla Developer documentation about setCustomValidity: https://developer.mozilla/en-US/docs/Web/Guide/HTML/Forms/Data_form_validation#Customized_error_messages.

But just keyup won't work properly if focus is not inside the input box we're modyfing.

Our previous example won't transfer the current state of the input box if the user mouses away and clicks elsewhere on the page. We update the ponent's values property only when the user presses Enter while the focus is inside the input box.

Let's fix that by listening to the input box's blur event as well.

Above is from Angular 2 docs: User Input, paragraph "On blur" https://angular.io/docs/ts/latest/guide/user-input.html.

Simplified example

Below is example from Mozilla documentation with added blur keyEvent listener. Yup, refactoring needed, but mine version in Angular 2 looks vastly different and so probably will yours.

<form>
  <label for="mail">I would like you to provide me an e-mail</label>
  <input type="email" id="mail" name="mail">
  <button>Submit</button>
</form>

And then

var email = document.getElementById("mail");

email.addEventListener("keyup", function (event) {
  if (email.validity.typeMismatch) {
    email.setCustomValidity("I expect an e-mail, darling!");
  } else {
    email.setCustomValidity("");
  }
});

email.addEventListener("blur", function (event) {
  if (email.validity.typeMismatch) {
    email.setCustomValidity("I expect an e-mail, darling!");
  } else {
    email.setCustomValidity("");
  }
});