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

Question

必填字段自定义验证

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

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

Answer 1

代码段

由于这个答案得到了很多关注,这是我提出的一个很好的可配置代码片段:

/**
  * @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 当浏览器将输入标记为无效时显示(例如,当它不是有效的电子邮件地址时)

您可以为三个属性中的每个属性分配字符串或函数.
如果指定了一个函数,它可以接受对input元素(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

Answer 2

您只需使用oninvalid属性即可实现此功能,请查看此演示代码

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

Answer 3

HTML:

<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 4

试试这个:

$(function() {
    var elements = document.getElementsByName("topicName");
    for (var i = 0; i < elements.length; i++) {
        elements[i].oninvalid = function(e) {
            e.target.setCustomValidity("Please enter Room Topic Title");
        };
    }
})

我在Chrome和FF中对此进行了测试,它在两种浏览器中都有效.

Answer 5

伙计,我从未在HTML 5中这样做,但我会尝试.看看这个小提琴.

我在输入标记上使用了一些jQuery,HTML5本机事件和属性以及自定义属性(如果您尝试验证代码,这可能会导致问题).我没有在所有浏览器中测试过,但我认为它可能有用.

这是使用jQuery的字段验证JavaScript代码:

$(document).ready(function()
{
    $('input[required], input[required="required"]').each(function(i, e)
    {
        e.oninput = function(el)
        {
            el.target.setCustomValidity("");

            if (el.target.type == "email")
            {
                if (el.target.validity.patternMismatch)
                {
                    el.target.setCustomValidity("E-mail format invalid.");

                    if (el.target.validity.typeMismatch)
                    {
                         el.target.setCustomValidity("An e-mail address must be given.");
                    }
                }
            }
        };

        e.oninvalid = function(el)
        {
            el.target.setCustomValidity(!el.target.validity.valid ? e.attributes.requiredmessage.value : "");
        };
    });
});

尼斯.这是简单的表单html:

<form method="post" action="" id="validation">
    <input type="text" id="name" name="name" required="required" requiredmessage="Name is required." />
    <input type="email" id="email" name="email" required="required" requiredmessage="A valid E-mail address is required." pattern="^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9]+$" />

    <input type="submit" value="Send it!" />
</form>

该属性requiredmessage是我所谈到的自定义属性.您可以为每个必需字段设置消息,导致jQuery在显示错误消息时将从中获取该消息.您不必在JavaScript上设置每个字段,jQuery为您完成.那个正则表达式看起来很好(至少它阻止你了testing@.com!哈哈)

正如你在小提琴上看到的那样,我对提交表单事件进行了额外的验证(这也是在document.ready上):

$("#validation").on("submit", function(e)
{
    for (var i = 0; i < e.target.length; i++)
    {
        if (!e.target[i].validity.valid)
        {
            window.alert(e.target.attributes.requiredmessage.value);
            e.target.focus();
            return false;
        }
    }
});

无论如何,我希望这可以起作用或帮助你.

Answer 6

这适合我:

jQuery(document).ready(function($) {
    var intputElements = document.getElementsByTagName("INPUT");
    for (var i = 0; i < intputElements.length; i++) {
        intputElements[i].oninvalid = function (e) {
            e.target.setCustomValidity("");
            if (!e.target.validity.valid) {
                if (e.target.name == "email") {
                    e.target.setCustomValidity("Please enter a valid email address.");
                } else {
                    e.target.setCustomValidity("Please enter a password.");
                }
            }
        }
    }
});

和我正在使用的形式(截断):

<form id="welcome-popup-form" action="authentication" method="POST">
    <input type="hidden" name="signup" value="1">
    <input type="email" name="email" id="welcome-email" placeholder="Email" required></div>
    <input type="password" name="passwd" id="welcome-passwd" placeholder="Password" required>
    <input type="submit" id="submitSignup" name="signup" value="SUBMIT" />
</form>

Answer 7

您可以在同一类型的所有输入中为"无效"设置事件侦听器,或者根据您的需要设置一个,然后设置正确的消息.

[].forEach.call( document.querySelectorAll('[type="email"]'), function(emailElement) {
    emailElement.addEventListener('invalid', function() {
        var message = this.value + 'is not a valid email address';
        emailElement.setCustomValidity(message)
    }, false);

    emailElement.addEventListener('input', function() {
        try{emailElement.setCustomValidity('')}catch(e){}
    }, false);
    });

脚本的第二部分,有效性消息将被重置,否则将无法提交表单:例如,这可以防止即使电子邮件地址已被更正也会触发消息.

此外,您不必根据需要设置输入字段,因为一旦您开始输入输入,将触发"无效".

这是一个小提琴:http://jsfiddle.net/napy84/U4pB7/2/ 希望有所帮助!

Answer 8

只需要获取元素并使用 setCustomValidity 方法即可。

例子

var foo = document.getElementById('foo');
foo.setCustomValidity(' An error occurred');

Answer 9

在每个输入标签中使用属性“title”并在其上写一条消息