设置自定义HTML5必填字段验证消息

Question

必填字段自定义验证我有一个包含许多输入字段的表单。我已经放了html5验证<input type="text" name="topicName" id="topicName" required />当我提交表单而不填写此文本框时，它会显示默认消息"Please fill out this field"有人可以帮我编辑这条消息吗？我有一个javascript代码来编辑它，但它不起作用$(document).ready(function() {    var elements = document.getElementsByName("topicName");    for (var i = 0; i < elements.length; i++) {        elements[i].oninvalid = function(e) {            e.target.setCustomValidity("");            if (!e.target.validity.valid) {                e.target.setCustomValidity("Please enter Room Topic Title");            }        };        elements[i].oninput = function(e) {            e.target.setCustomValidity("");        };    }})电子邮件自定义验证我有以下HTML表单<form id="myform">    <input id="email" name="email" type="email" />    <input type="submit" /></form>我想要的验证消息。必填字段：请输入电子邮件地址错误电子邮件： 'testing @ .com'不是有效的电子邮件地址。（此处，输入的电子邮件地址显示在文本框中）我试过这个。function check(input) {      if(input.validity.typeMismatch){          input.setCustomValidity("'" + input.value + "' is not a Valid Email Address.");      }      else {          input.setCustomValidity("");      }                 }  此功能无法正常工作，您还有其他方法吗？我们将不胜感激。

Answer 1

您只需使用oninvalid属性即可实现此功能，请查看此演示代码

<form>

<input type="email" pattern="[^@]*@[^@]" required oninvalid="this.setCustomValidity('Put  here custom message')"/>

<input type="submit"/>

</form>