设置自定义 HTML5 必填字段验证消息
Posted
技术标签:
【中文标题】设置自定义 HTML5 必填字段验证消息【英文标题】：Set custom HTML5 required field validation message 【发布时间】：2012-11-27 17:03:24 【问题描述】：必填字段自定义验证
我有一个包含许多输入字段的表单。我已经放了 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("");
此功能无法正常使用，请问您有其他方法吗？将不胜感激。
【问题讨论】：
“不工作”是什么意思？它给出错误吗？打开 Chrome 的开发者工具或 Firefox 的 Firebug，看看是否有 JavaScript 错误。 还有其他方法吗？ 你能发布更多代码吗？您发布的内容不足以帮助您。你在什么浏览器中测试这个？ @LeviBotelho 我已经发布了整个代码，我正在 Firefox 和 chrome 中进行测试 @SumitBijvani “寻找更多更好的答案”是什么意思？如果你能告诉我哪些部分是错误的/不够的，我会改进我的答案。 【参考方案1】：代码 sn-p
由于这个答案得到了很多关注，所以我想出了一个很好的可配置 sn-p：
/**
* @author ComFreek <https://***.com/users/603003/comfreek>
* @link https://***.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://***.com/revisions/16069817/6
【讨论】：
谢谢...您对错误电子邮件的自定义验证有效，但是对于必填字段，它会显示消息please fill out this field，您可以将此消息更改为Please enter email address
@SumitBijvani 没问题，这种行为的发生是因为我们只在 blur 事件触发一次后才为空电子邮件设置setCustomValidity()，因此我们只需要在DOM 加载也是如此。请参阅更新的示例/jsFiddle。
@SumitBijvani 我还修复了一些缺陷，请参阅我的代码 cmets。随时提问;)
感谢更新 jsFiddle，验证工作正常，但是当我输入真实的电子邮件地址时出现一个问题，然后验证也说，电子邮件地址无效
这很好用。我希望 HTML5“必需”功能也仅针对提交的空白字符进行验证（而默认情况下，它仅针对提交的空字符串进行验证）。所以我用if (input.value == "") 更改了这两行，改为阅读if (input.value.trim() == "") - 对我有用。【参考方案2】：
您可以使用 oninvalid 属性简单地实现这一点， 查看此演示代码
<form>
<input type="email" pattern="[^@]*@[^@]" required oninvalid="this.setCustomValidity('Put here custom message')"/>
<input type="submit"/>
</form>
Codepen 演示：https://codepen.io/akshaykhale1992/pen/yLNvOqP
【讨论】：
大声笑，每个人都在扔代码页，我太懒了，我一直在寻找内联代码，谢谢@akshay khale，你的答案是最好的。 乐于帮助@Thedijje 请记住 setCustomValidity 必须用类似oninput="setCustomValidity('')":***.com/a/16878766/1729850的东西重置
感谢@Leia 完成此答案。不幸的是，它不适用于单选按钮。即，如果您在一个按钮上触发无效，则会添加自定义字符串。然后，如果您单击不同的单选按钮，它将不会清除第一个单选按钮上的 cutomValidity 字符串。所以看起来需要一些 javascript 来监听和清除所有相关单选按钮上的任何 setCustomValidity。
这应该是公认的答案。简单是最好的解决方案。【参考方案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/
【讨论】：
这是唯一对我有用的。谢谢，里金。 我不想尝试其他高级方法。这是唯一一个对我进行电子邮件验证的简单方法。谢谢！【参考方案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 中对此进行了测试，并且在两种浏览器中都可以使用。
【讨论】：
有机会使用丰富的 HTML 内容吗？好像只支持文字，不支持标签，比如<b>Error: </b> Incorrect email address。
据我所知，这还不可能。您可以使用 CSS 对结果进行相应的样式设置，但这当然有其限制并且不适用于您的情况。无论如何，该技术仍然是相当新的技术，并且对大多数人来说还没有得到足够广泛的支持，因此无论您的实现如何，我认为您暂时最好还是使用替代解决方案。
假设有时（取决于其他输入），我想允许此类输入字段的空值。那么如何关闭默认验证消息？分配 setCustomValidity("") 没有帮助。是否还有其他需要设置的参数？请指教。【参考方案5】：
伙计，我从来没有在 HTML 5 中这样做过，但我会尝试的。看看this 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;
);
我希望这对你有用或对你有所帮助。
【讨论】：
为了避免非标准属性，你可以使用标准的data-前缀；例如data-requiredMessage。使用 jQuery，这可以通过 $(element).data('requiredMessage') 访问；我不知道标准的 DOM 接口。
@IMSoP 当然，它是有效的！【参考方案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>
【讨论】：
【参考方案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()
tryemailElement.setCustomValidity('')catch(e)
, false);
);
脚本的第二部分，有效性消息将被重置，否则将无法提交表单：例如，即使电子邮件地址已更正，这也会阻止消息被触发。
此外，您不必按要求设置输入字段，因为一旦您开始输入输入，就会触发“无效”。
这是一个小提琴：http://jsfiddle.net/napy84/U4pB7/2/ 希望对您有所帮助！
【讨论】：
【参考方案8】：在每个输入标签中使用属性“title”并在其上写一条消息
【讨论】：
【参考方案9】：只需要获取元素并使用setCustomValidity方法即可。
例子
var foo = document.getElementById('foo');
foo.setCustomValidity(' An error occurred');
【讨论】：
【参考方案10】：您可以简单地使用 oninvalid=" 属性，并绑定 this.setCustomValidity() eventListener！
这是我的演示代码！（您可以运行它来查看！）
<!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()【参考方案11】：您可以添加此脚本来显示您自己的消息。
<script>
input = document.getElementById("topicName");
input.addEventListener('invalid', function (e)
if(input.validity.valueMissing)
e.target.setCustomValidity("Please enter topic name");
//To Remove the sticky error message at end write
input.addEventListener('input', function (e)
e.target.setCustomValidity('');
);
);
</script>
对于模式不匹配等其他验证，您可以添加额外的 if else 条件
喜欢
else if (input.validity.patternMismatch)
e.target.setCustomValidity("Your Message");
还有rangeOverflow,rangeUnderflow,stepMismatch,typeMismatch,valid等其他有效条件
【讨论】：
以上是关于设置自定义 HTML5 必填字段验证消息的主要内容，如果未能解决你的问题，请参考以下文章