2

I want to create line breaks in my oninvalid pop up message so that I can list multiple requirements on the error message on different lines.

Here is the example code of what I'm trying to create:

  <form action='' method='post'>
  <input type="text" id="username" required placeholder="Enter Name" autocomplete="off" oninvalid="this.setCustomValidity('fix format #1 <br> fix format #2<br> fix format #3')" oninput="setCustomValidity('')" />
  <input type="submit" value="submit">
  </form>
user9555327
  • 57
  • 7

1 Answers1

-2

Add \n instead of the line breaks.

this.setCustomValidity('fix format #1 \n fix format #2\n fix format #3')"

New line in JavaScript alert box

illinoistim
  • 456
  • 10
  • 27
  • If that still did not work, you might have to escape the line break as well. \\n. In the similar question that I linked, you will find some additional information as well that might apply to your specific situation. It is hard to tell exactly what you need if you do not provide any other information such as what other programming language that you are using or the function this.setCustomValidity(). – illinoistim Apr 04 '18 at 16:58
  • I believe it is JavaScript. Since it is for a form input invalid message pop up and not a JavaScript alert I'm not sure the /n will work as it does in your example. – user9555327 Apr 04 '18 at 18:17
  • \xa0 works for adding spaces so I'm not sure why /n isn't working. – user9555327 Apr 04 '18 at 18:42
  • Please upvote or mark as answer as someone decided to downvote without comment. – illinoistim Apr 04 '18 at 21:35
  • @user9555327 Neither `\n` nor `/n` works for me in Chrome. What browser are you testing with? – j08691 Apr 05 '18 at 11:58
  • This method now works (using `\n`), should be the accepted answer. – Matt K Feb 08 '22 at 20:24
  • 1
    I've just run into this issue, @MattK and I've tested on Brave and Firefox. Conclusion: `\n` is working in `setCustomValidity()` in Blink-based browsers, but it's not (yet) working in Gecko. – Rounin Feb 14 '23 at 14:52