How to break text passed to setCustomValidity?

Question

I'm validating data entered in a form using HTML5. Is there a way of breaking the string passed as an argument of method setCustomValidity()?

I've tried different combinations of a carriage return and line feed, non of them working. They're not getting printed, however, they're not causing any result either.

I've edited my text and made it shorter but I wonder if there's a way to do this?

<input type="text" id="name" class="form-control" placeholder="Name" required pattern="[Ll].*" oninvalid="this.setCustomValidity('Put a valid name! \n Name should contain at least one uppercase and one lowercase letter.')"
                                               oninput="this.setCustomValidity('')">

Answer 1

You can put html inside of the string and then add that to the html element. Submit the form with empty input to see oninvalid event firing.

<form>

  <input type="text" id="name" class="form-control" placeholder="Name" required pattern="[Ll].*" oninvalid="validate('Put a valid name! <br> Name should contain at least one uppercase and one lowercase letter.')" oninput="validate('')">

  <input type="submit" value="Submit">
</form>

<p id="output"></p>

<script>
  function validate(msg) {
    document.getElementById("output").innerHTML = msg;
  }
</script>