如何对齐 HTML5 表单验证气泡消息？

Question

When HTML5 form contains required fields , such as

<input placeholder="Name" required>

or

<textarea placeholder="message" required>

...and such field is submitted empty, Google Chrome (and perhaps also some other browsers) shows the invalid validation bubble message like this:

...which by default has center alignment. Is it be possible to force to display such bubble message on left, like this: ?

---

I am not trying to style this bubble message, therefore please do not consider this post as a duplicate to other posts that ask for change of appearance/style.

Answer 1

The best workaround for this is to prevent a default behavior by

document.addEventListener('invalid', (function () {
  return function (e) {
    e.preventDefault();
  };
})(), true);

...and to add own visual appearance, such as

input:invalid, textarea:invalid 
{
  background: rgba(255, 64, 64, 0.1);
  border-color: rgb(255, 64, 64);
}

...and surely, own bubble message can be designed and added, if desired.