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

Question

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

<input type="text" required>

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

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

我该怎么做？有可能吗？

这个网上似乎还不够material。

请指导。

Answer 1

当然可以，加上一点 Javascript。您可以使用 HTMLInputElement.setCustomValidity(String)。当它设置为任何非空字符串时，拥有 <input> 将不会验证。您可以在 change 事件或类似事件中调用它；如果您通过自己的代码决定 <input> 无效，只需设置消息即可。如果您认为一切都很好，则将其设置为 ""（空的 String）。

希望对您有所帮助。

Answer 2

试试这个代码 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!';
    }
});

工作 fiddle 可以在 http://jsfiddle.net/meghanagpal/B4hYG/622/

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

Is it possible to customize an HTML 5 <input required> attribute error message?

html

required

html5-validation