设置自定义HTML5所需字段验证消息

Question

我有一个表单，有许多输入字段。我已经对html5进行了验证

<input type="text" name="topicName" id="topicName" required />

当我提交表单时，没有填写这个文本框，它显示默认消息，如

“请填写此字段”

有人能帮我编辑这条消息吗？

我有一个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>

验证消息我想要喜欢。

必填字段：请输入电子邮件地址
错误的电子邮件：测试@. com不是一个有效的电子邮件地址。

我试过这个。

function check(input) {  
    if(input.validity.typeMismatch){  
        input.setCustomValidity("'" + input.value + "' is not a Valid Email Address.");  
    }  
    else {  
        input.setCustomValidity("");  
    }                 
}  

此功能无法正常工作，您是否有其他方法来执行此操作？我们将不胜感激。

Answer 1

超文本标记语言：

<form id="myform">
    <input id="email" oninvalid="InvalidMsg(this);" name="email" oninput="InvalidMsg(this);"  type="email" required="required" />
    <input type="submit" />
</form>

JAVASCRIPT:

function InvalidMsg(textbox) {
    if (textbox.value == '') {
        textbox.setCustomValidity('Required email address');
    }
    else if (textbox.validity.typeMismatch){{
        textbox.setCustomValidity('please enter a valid email address');
    }
    else {
       textbox.setCustomValidity('');
    }
    return true;
}

演示：

http://jsfiddle.net/patelriki13/Sqq8e/

Answer 2

您可以使用oninvalid属性简单地实现这一点，签出此演示代码

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

代码笔演示：https://codepen.io/akshaykhale1992/pen/yLNvOqP

Answer 3

由于这个答案得到了很多关注，下面是我想出的一个很好的可配置片段：

/**
  * @author ComFreek <https://stackoverflow.com/users/603003/comfreek>
  * @link https://stackoverflow.com/a/16069817/603003
  * @license MIT 2013-2015 ComFreek
  * @license[dual licensed] CC BY-SA 3.0 2013-2015 ComFreek
  * You MUST retain this license header!
  */
(function (exports) {
    function valOrFunction(val, ctx, args) {
        if (typeof val == "function") {
            return val.apply(ctx, args);
        } else {
            return val;
        }
    }

    function InvalidInputHelper(input, options) {
        input.setCustomValidity(valOrFunction(options.defaultText, window, [input]));

        function changeOrInput() {
            if (input.value == "") {
                input.setCustomValidity(valOrFunction(options.emptyText, window, [input]));
            } else {
                input.setCustomValidity("");
            }
        }

        function invalid() {
            if (input.value == "") {
                input.setCustomValidity(valOrFunction(options.emptyText, window, [input]));
            } else {
               input.setCustomValidity(valOrFunction(options.invalidText, window, [input]));
            }
        }

        input.addEventListener("change", changeOrInput);
        input.addEventListener("input", changeOrInput);
        input.addEventListener("invalid", invalid);
    }
    exports.InvalidInputHelper = InvalidInputHelper;
})(window);

→jsFiddle

<input id="email" type="email" required="required" />

InvalidInputHelper(document.getElementById("email"), {
  defaultText: "Please enter an email address!",

  emptyText: "Please enter an email address!",

  invalidText: function (input) {
    return 'The email address "' + input.value + '" is invalid!';
  }
});

• defaultText最初显示
• emptyText在输入为空时显示（已清除）
• 当浏览器将输入标记为无效时（例如，当输入不是有效的电子邮件地址时），将显示invalidText

您可以为这三个属性中的每一个指定字符串或函数
如果分配函数，它可以接受对输入元素（DOM节点）的引用，并且必须返回一个字符串，该字符串随后显示为错误消息。

测试地点：

• 铬金丝雀47.0。2
• IE 11
• Microsoft Edge（使用截至2015年8月28日的最新版本）
• 火狐40.0。3
• 歌剧31.0

您可以在此处看到旧版本：https://stackoverflow.com/revisions/16069817/6