How to insert new line in input validation tooltip message? When Hover it works fine but i click send it doesnt

Hope this helpful to you

Just use the entity code 
 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>

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.

• setCustomValidity message styles on multiple lines
• Create line breaks in oninvalid message

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.

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>