html - 如何打破传递给 setCustomValidity (HTML5) 的文本

Question

我正在使用 HTML5 验证在表单中输入的数据。有没有办法打破作为方法 setCustomValidity() 的参数传递的字符串？

我尝试了回车和换行的不同组合，但它们都不起作用。它们没有被打印出来，但是，它们也不会导致任何结果。

我已经编辑了我的文本并使其更短，但我想知道是否有办法做到这一点？

<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

您可以将 html 放在字符串中，然后将其添加到 html 元素中。提交带有空输入的表单以查看 oninvalid 事件触发。

<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>