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

必填字段自定义验证

我有一个包含许多输入字段的表单。我已经放了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("");  

    }                 

}  

此功能无法正常工作,您还有其他方法吗?我们将不胜感激。


catspeake
浏览 1346回答 3
3回答

尚方宝剑之说

您只需使用oninvalid属性即可实现此功能,请查看此演示代码<form><input type="email" pattern="[^@]*@[^@]" required oninvalid="this.setCustomValidity('Put&nbsp; here custom message')"/><input type="submit"/></form>
打开App,查看更多内容
随时随地看视频慕课网APP