必填字段自定义验证

我有很多输入字段的一种形式。我已经进行了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("");
    }
}

此功能无法正常工作,您还有其他方法可以执行此操作吗?将不胜感激。

最佳答案

程式码片段

由于这个答案引起了极大的关注,因此我想到了一个不错的可配置代码段:

/**
  * @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节点)的引用,并且它必须返回一个字符串,该字符串随后将显示为错误消息。

    兼容性

    经过测试:
  • Chrome Canary 47.0.2
  • IE 11
  • Microsoft Edge(使用截至2015年8月28日的最新版本)
  • Firefox 40.0.3
  • Opera 31.0


  • 旧答案

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

    09-16 22:31
    查看更多