首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >HTML5表单必需属性。是否设置自定义验证消息?

HTML5表单必需属性。是否设置自定义验证消息?
EN

Stack Overflow用户
提问于 2011-03-11 19:40:29
回答 14查看 676.9K关注 0票数 389

我得到了以下HTML5表单:http://jsfiddle.net/nfgfP/

<form id="form" onsubmit="return(login())">
<input name="username" placeholder="Username" required />
<input name="pass"  type="password" placeholder="Password" required/>
<br/>Remember me: <input type="checkbox" name="remember" value="true" /><br/>
<input type="submit" name="submit" value="Log In"/>

目前,当我在两者都为空的情况下点击enter时,会出现一个弹出框,上面写着“请填写此字段”。如何将默认消息更改为“此字段不能留空”?

编辑:还注意到类型密码字段的错误消息是简单的*****。要重新创建它,给username一个值,然后点击submit。

编辑:我正在使用Chrome10进行测试。请做同样的事

EN

回答 14

Stack Overflow用户

回答已采纳

发布于 2011-03-12 02:14:12

使用setCustomValidity

document.addEventListener("DOMContentLoaded", function() {
    var elements = document.getElementsByTagName("INPUT");
    for (var i = 0; i < elements.length; i++) {
        elements[i].oninvalid = function(e) {
            e.target.setCustomValidity("");
            if (!e.target.validity.valid) {
                e.target.setCustomValidity("This field cannot be left blank");
            }
        };
        elements[i].oninput = function(e) {
            e.target.setCustomValidity("");
        };
    }
})

正如@itpastorn在评论中建议的那样,我从Mootools获得了changed to vanilla JavaScript,但如果需要的话,你应该能够计算出Mootools的等价物。

编辑

我已经更新了这里的代码,因为setCustomValidity的工作方式与我最初回答时所理解的略有不同。如果setCustomValidity被设置为空字符串以外的任何值,它将导致该字段被视为无效;因此,您必须在测试有效性之前清除它,您不能只设置它就忘记它。

进一步编辑

正如@thomasvdb在下面的注释中所指出的,您需要在invalid之外的某些事件中清除自定义有效性,否则可能需要通过oninvalid处理程序额外传递来清除它。

票数 314
EN

Stack Overflow用户

发布于 2013-11-25 17:52:57

下面是在HTML5中处理自定义错误消息的代码:

<input type="text" id="username" required placeholder="Enter Name"
  oninvalid="this.setCustomValidity('Enter User Name Here')"
  oninput="this.setCustomValidity('')"/>

这一部分很重要,因为当用户输入新数据时,它会隐藏错误消息:

oninput="this.setCustomValidity('')"
票数 399
EN

Stack Overflow用户

发布于 2012-08-13 20:50:43

HTML5 event oninvalid的帮助下,控制自定义消息非常简单

下面是代码:

<input id="UserID"  type="text" required="required"
       oninvalid="this.setCustomValidity('Witinnovation')"
       onvalid="this.setCustomValidity('')">

这是最重要的:

onvalid="this.setCustomValidity('')"
票数 107
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/5272433

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档