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

120

必填字段自定义验证

我有一个表单包含多个输入字段。我已经添加了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>


我希望的验证信息如下:

必填字段:请输入电子邮件地址
错误的电子邮件地址:'testing@.com'不是一个有效的电子邮件地址。(这里显示在文本框中输入的电子邮件地址

我已经尝试过了。

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

这个函数没有正常工作,你有其他的方式来完成这件事吗?将不胜感激。


1
你说的“不工作”是什么意思?它是否出现了错误?打开Chrome的开发者工具或Firefox的Firebug,看看是否有JavaScript错误。 - Osiris
@LeviBotelho 我已经发布了整个代码,并且正在Firefox和Chrome中进行测试。 - Sumit Bijvani
好的,但是使用哪个版本的FF和Chrome? - Levi Botelho
最新的Firefox 20.0和Chrome 25 - Sumit Bijvani
3
@SumitBijvani 你说的“寻找更好的答案”是什么意思?如果您能告诉我哪些部分有误或不足,我会改进我的回答。 - ComFreek
显示剩余6条评论
12个回答

119

代码片段

由于这个答案受到了很多关注,我想分享一个我设计的可配置代码片段:

/**
  * @author ComFreek <https://stackoverflow.com/users/603003/comfreek>
  * @link https://dev59.com/uWYr5IYBdhLWcg3wR4Us#16069817
  * @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


1
谢谢...您的自定义验证对于错误的电子邮件地址是有效的,但是对于必填字段,它显示消息“请填写此字段”。您能否将此消息更改为“请输入电子邮件地址”? - Sumit Bijvani
1
感谢更新 jsFiddle,验证功能正常工作,但是当我输入真实的电子邮件地址时,验证仍然提示该电子邮件地址无效,这是一个问题。 - Sumit Bijvani
@JocelyneElKhoury 你的使用情况是什么?看一下这个链接:https://dev59.com/qmct5IYBdhLWcg3wufxb - ComFreek
@JocelyneElKhoury 您可以在第二个按钮的单击事件处理程序中使用 elem.required = false - ComFreek
1
这个很有效。我想要HTML5中的"required"功能也能验证只有空格字符被提交(默认情况下仅验证是否提交了空字符串)。所以我把两行代码中的 if (input.value == "") { 改为 if (input.value.trim() == "") { - 对我起作用了。 - Jaza
显示剩余13条评论

68
您可以使用oninvalid属性来轻松实现此操作,查看此演示代码。
<form>
<input type="email" pattern="[^@]*@[^@]" required oninvalid="this.setCustomValidity('Put  here custom message')"/>
<input type="submit"/>
</form>

enter image description here

Codepen演示:https://codepen.io/akshaykhale1992/pen/yLNvOqP


18
大家都抛出了大段代码,我太懒了,想找一个内联的代码,谢谢@akshay khale,你的回答是最好的。 - Dheeraj Thedijje
1
很高兴能帮助@Thedijje - Akshay Khale
16
请记住,setCustomValidity必须通过类似于oninput="setCustomValidity('')" 的方式进行重置:https://dev59.com/F2Qn5IYBdhLWcg3wZGZ4#16878766 - Leia
3
谢谢@Leia完成了这个回答。不幸的是,对于单选按钮无效。即,如果您在一个按钮上触发无效操作,则会添加自定义字符串。然后,如果您单击另一个单选按钮,则不会清除第一个按钮上设置的cutomValidity字符串。因此,似乎需要一些JavaScript来监听并清除所有相关单选按钮上设置的setCustomValidity。 - ryan2johnson9
2
这应该是被接受的答案。简单是最好的解决方案。 - Keno
显示剩余4条评论

22

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/


这是唯一一个对我有效的。谢谢,Rikin。 - Bashar Ghadanfar
我不想尝试其他高级方法。这是唯一一个对我有效的简单方法,用于电子邮件验证。谢谢! - Mycodingproject

16

试一下这个:

$(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中进行了测试,两个浏览器都可以正常工作。


1
有没有机会使用丰富的HTML内容?它似乎仅支持纯文本,没有标签,比如<b>错误:</b> 邮箱地址不正确 - Ωmega
据我所知,目前还不可能。您可以使用CSS对结果进行样式设置,但这当然有其限制,并且不适用于您的情况。无论如何,该技术仍然相当新,并且大多数人并不广泛支持,因此在我看来,无论您的实现方式如何,暂时最好使用替代解决方案。 - Levi Botelho
假设有时(取决于其他输入),我想允许此输入字段的空值。那么如何关闭默认验证消息呢?分配 setCustomValidity("") 并没有起到帮助作用。是否需要设置其他参数?请给予建议。 - Ωmega

8

我从未在HTML 5中进行过这样的操作,但我会尝试。请查看这个fiddle。

我使用了一些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!哈哈)。
如您在fiddle上看到的,我对提交表单事件进行了额外的验证(这也适用于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;
        }
    }
});

I hope this works or helps you in anyway.


1
为避免使用非标准属性,您可以使用标准的 data- 前缀,例如 data-requiredMessage。在 jQuery 中,可以通过 $(element).data('requiredMessage') 访问它;我不知道标准 DOM 接口是什么。 - IMSoP
@IMSoP 当然,它是有效的! - DontVoteMeDown

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>

enter image description here


5

您可以为同类型的所有输入设置“无效”事件侦听器,也可以只为一个输入设置,具体取决于您的需求,然后设置适当的消息。

[].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);
    });

脚本的第二部分是重置有效性消息,否则将无法提交表单:例如,即使电子邮件地址已更正,也会防止触发消息。
此外,您不必将输入字段设置为必填项,因为一旦开始输入,就会触发“无效”。
这里有一个fiddle示例:http://jsfiddle.net/napy84/U4pB7/2/希望这有所帮助!

5

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

示例

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

5
在每个输入标签中使用属性"title"并在其上写下一条消息。

3

你可以直接使用oninvalid="属性,并绑定this.setCustomValidity()事件监听器!

这是我的演示代码!(你可以运行它查看!) enter image description here

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>oninvalid</title>
</head>
<body>
    <form action="https://www.google.com.hk/webhp?#safe=strict&q=" method="post" >
        <input type="email" placeholder="xgqfrms@email.xyz" required="" autocomplete="" autofocus="" oninvalid="this.setCustomValidity(`This is a customlised invalid warning info!`)">
        <input type="submit" value="Submit">
    </form>
</body>
</html>

参考链接

http://caniuse.com/#feat=form-validation

https://www.w3.org/TR/html51/sec-forms.html#sec-constraint-validation

这些链接提供了关于表单验证相关的文档和浏览器兼容性信息。

setCustomValidity() - xgqfrms

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接