Control input hint

Question

Some browsers provide a hint to the user for an input field based on the type of the input, e.g. here for type="email":

<input accesskey="e" name="email" id="email" type="email" required>

Chrome:

Firefox:

My questions are:

Are these part of any spec?
Is there a way to control that message (the message itself and also disable/enable it)?
Is there a way to style this tooltip?

score 2 · Answer 1 · answered Sep 11 '17 at 12:10

its browser behavior so its cant be modified but you can done something like the tool-tip or hint using bootstrap css framework

<a href="#" data-toggle="tooltip" title="Hooray!">Hover over me</a> 

<a href="#" data-toggle="tooltip" data-placement="top" title="Hooray!">Hover</a>
<a href="#" data-toggle="tooltip" data-placement="bottom" title="Hooray!">Hover</a>
<a href="#" data-toggle="tooltip" data-placement="left" title="Hooray!">Hover</a>
<a href="#" data-toggle="tooltip" data-placement="right" title="Hooray!">Hover</a>

You can find examples here

score 0 · Answer 2 · answered Sep 11 '17 at 12:09

0

This is the solution from Mozilla

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

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

answered Sep 11 '17 at 12:09

Valdrinium

1,398
1
13
28

Unfortunately, that doesn't seem to work. See my updated question. – Avraam Mavridis Sep 11 '17 at 12:16
Oh, sorry, I was under the impression that you were referring to something else. – Valdrinium Sep 11 '17 at 12:18

DMC19 · Answer 3 · 2017-09-11T12:25:34.710

0

To customize the appearance and text of these messages, you must use JavaScript, there is no way to do it using just HTML and CSS.

You can use something like this:

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

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

HTML5 introduced new mechanisms for forms: it added new semantic types for the element and constraint validation to ease the work of checking the form content on the client side. Check this documentation

If you want to disable client side validation for a form in HTML5 add a novalidate attribute to the form element. Fx:

<form method="post" action="/foo" novalidate>...</form>

edited Sep 11 '17 at 12:25

answered Sep 11 '17 at 12:16

DMC19

825
2
14
33

See my updated question, I tried that in Firefox and it doesnt seem to work. – Avraam Mavridis Sep 11 '17 at 12:18
@AvraamMavridis Maybe this SO answer helps you: [https://stackoverflow.com/questions/10361460/how-can-i-change-or-remove-html5-form-validation-default-error-messages](https://stackoverflow.com/questions/10361460/how-can-i-change-or-remove-html5-form-validation-default-error-messages) Check my Edit about your other questions about this. – DMC19 Sep 11 '17 at 12:33

score -2 · Answer 4 · answered Sep 11 '17 at 12:04

-2

just give a title attribute and use your content to show , and there is no way to style it, to style it you need to include jquery library

<input type="text" title="this is how i did that" />

answered Sep 11 '17 at 12:04

Awsme Sandy

1,398
7
20

Thanks for the answer, the thing is that title attribute is not conditional, it will always appear, no matter if the user for example has already put a `@` in an email field – Avraam Mavridis Sep 11 '17 at 12:07
For the validation you need to add the library https://jqueryvalidation.org/ like this – Awsme Sandy Sep 11 '17 at 12:09
That's not true actually, you can achieve a decent level of validation with native HTML5. – Avraam Mavridis Sep 11 '17 at 12:09
The native html5 can only help you with the email valdation, for other custom validations for username or password strenth, its better to use the jquery library, because browsers like window safari will not work smoothly with this. – Awsme Sandy Sep 11 '17 at 12:11
Including jquery + jquery plugin just for validation is not ideal for me. You can achieve password strength with the `pattern` attribute and min-max for the length. – Avraam Mavridis Sep 11 '17 at 12:13
Great , and how about if you want to set username without special character and uppercase – Awsme Sandy Sep 11 '17 at 12:16
You can use the `pattern` with the right regex that accepts only uppercase characters `pattern="[A-Z]"` – Avraam Mavridis Sep 11 '17 at 12:18
@AvraamMavridis check here the browser compatibilty you will get your answer http://caniuse.com/#search=minlength – Awsme Sandy Sep 11 '17 at 12:18
As I said the pattern attribute can be used. See the comment below the link you posted `The pattern attribute can be used as an alternative solution for browsers without support.` – Avraam Mavridis Sep 11 '17 at 12:20
Great got it @AvraamMavridis – Awsme Sandy Sep 11 '17 at 12:20

Control input hint

4 Answers4