Question

我正在使用HTML5必需属性来执行页内验证。

<input type="text" required>

请看这个plunker：http://plnkr.co/edit/Swy4hFEewCYlnL0bJKq1?p=streamer

但我不想显示默认错误文字"Please fill out this field."，而是想要另一个自定义消息说"You cannot leave the xyz field empty. Blah, blah, blah"

我该怎么做？它甚至可能吗？

这在网上似乎没有足够的资料。

请指导。

Answer 1

试试这段代码 HTML

<form action="">
    <input id="email" type="email" required="required" />
    <input type="submit" id="btnSubmit" />
</form>

的Javascript

(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 {
               console.log("INVALID!"); input.setCustomValidity(valOrFunction(options.invalidText, window, [input]));
            }
        }

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



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!';
    }
});

可以找到工作小提琴 http://jsfiddle.net/meghanagpal/B4hYG/622/

Answer 2

当然，您可以使用一些Javascript。您可以使用HTMLInputElement.setCustomValidity(String)。当它设置为任何非空字符串时，拥有<input>不会验证。您可以在change事件或类似事件中调用此信息;如果您通过自己的代码确定<input>无效，请设置消息。如果您确定它一切正常，请将其设置为""（空String）。

希望有所帮助。

是否可以自定义HTML 5 <input required =“”/>属性错误消息？

2 个答案: