3

How can I add new line in the input tooltip message . I tried <br>, \n, &nbsp; but it didn't work.

<input type="password"  id="password" v-model="user.password" class="form-control"
 title="Must contain at least one number, one uppercase letter, one special character and at least 8 characters"  pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[!@#\$%\^&\*]).{8,}" required>
gesha
  • 79
  • 7

3 Answers3

4

Hope this helpful to you

Just use the entity code &#013; for a linebreak in a title attribute.

Add line break within tooltips

https://jsfiddle.net/cuahms2z/

<form id="myform" >
  <input data-html="true"  type="password"  id="password" v-model="user.password" class="form-control"
 title="Must contain at least one number &#013;
 one uppercase letter &#013;one special &#013; character and at least 8 characters"  pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[!@#\$%\^&\*]).{8,}" required>
    <input type="submit" />
</form>
M123
  • 1,203
  • 4
  • 14
  • 31
  • Itried here , but it doesnt works :(( https://jsfiddle.net/y25dorp3/ – gesha Jan 20 '21 at 09:59
  • @gesha You used the html tag not the uml code, as Mansi wrote – Reporter Jan 20 '21 at 10:04
  • @gesha Please check once , https://jsfiddle.net/cuahms2z/ – M123 Jan 20 '21 at 10:26
  • @Mansi unfortunately, is this because of chrome ? i am using chrome browser, tried both in mac and windows, :(( – gesha Jan 20 '21 at 10:32
  • @gesha I tried in firefox ,IE and chrome. it's work in this three browser in windows – M123 Jan 20 '21 at 10:34
  • when i hover it works fine. but when i click send it doesnt. Is there any solution for this? – gesha Jan 20 '21 at 10:46
  • @Mansi in your example when you click Submit there is not a line break at all. – Aalexander Jan 20 '21 at 11:11
  • This only works for the tooltip on hover. It does not work for the error message after submitting the form. See [this answer](https://stackoverflow.com/a/65806922/798634) for adding line breaks to error message. – Matt K Feb 08 '22 at 18:26
2

Update

I have created an issue for this at mdn/mdn https://github.com/mdn/mdn/issues/114

I researched a bit about this and found also 2 other SO Questions one were unanswered and the other had a really bad answer.

Then I found this article and it helped me to understand the case a bit better and I wrote my own customValidityMessage.

var input = document.getElementById('inp');
input.oninvalid = function(event) {
    event.target.setCustomValidity("Must contain at least" + "\n"+ "one" + "\r" + "number one uppercase \n letter,\n one special \n character and at least 8 characters");
}

The MDN Docs said that the parameter for .setCustomValidity() is a DOM String and a DOM String corresponding to JS String

A DOMString is a sequence of 16-bit unsigned integers, typically interpreted as UTF-16 code units. This corresponds exactly to the JavaScript primitive String type. When a DOMString is provided to JavaScript, it maps directly to the corresponding String.

so I thought it should be easy possible to insert inside the string '\n' or '\n'. So I tried as you can see in the example below and it is interpreted but inside the message there is still no line break.

var input = document.getElementById('inp');
input.oninvalid = function(event) {
    event.target.setCustomValidity("Must contain at least " + String.fromCharCode(13) + " one " + String.fromCharCode(67) + " number one uppercase \n letter,\n one special \n character and at least 8 characters");
}
<form id="myform">
  <input id="inp" data-html="true" type="password" id="password" v-model="user.password" class="form-control"  pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[!@#\$%\^&\*]).{8,}" required>
  <input type="submit" />
</form>

I didn't found a solution for this sadly but I thought my attempts can be helpful to solve this isssue so I decided to write it here as a summary of my perceptions.

Aalexander
  • 4,987
  • 3
  • 11
  • 34
0

Putting enter makes lines change.

<input type="password"  id="password" v-model="user.password" class="form-control"
 title=" · Must contain at least one number, 
 · one uppercase letter, 
 · one special character and
 · at least 8 characters"  pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[!@#\$%\^&\*]).{8,}" required>
jacobkim
  • 1,043
  • 10
  • 20