设置自定义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&nbsp; here custom message')"/><input type="submit"/></form>