如何在 setCustomValidity("..."); 之后清除、删除或重置 HTML5 表单验证状态?
在 Firefox 和 Chrome 中设置空字符串 setCustomValidity(""); 会关闭表单验证错误消息。我不想关闭表单验证错误消息。我想重置验证状态,以便可以检查下一个答案并保留显示的验证错误消息。如果未重置验证状态,那么即使是下一个正确答案也会错误地显示验证错误消息。
所以不知何故,“清除”意味着“关闭”?
If the argument is the empty string, clears the custom error.
这是一个验证测试用例:
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta charset="utf-8"/>
<title>Validation test case</title>
</head>
<body>
<form id="testForm">
<input type="text" id="answer" pattern="[A-Za-z]+" autofocus required/>
<input type="submit" value="OK"/>
</form>
<script>
/*jslint browser: true, vars: true, white: true, maxerr: 50, indent: 4 */
(function ()
{
"use strict";
var form = null;
var answer = null;
var isCorrectAnswer = function (value)
{
return (value === "a");
};
var closeValidation = function (element)
{
// Close the form validation error message if displayed.
element.blur();
element.focus();
};
var validateForm = function (event)
{
event.preventDefault();
event.stopPropagation();
var isValidForm = event.target.checkValidity();
if (isValidForm)
{
if (isCorrectAnswer(answer.value))
{
form.reset();
closeValidation(answer);
console.log("Correct answer.");
alert("Correct answer.");
}
else
{
console.log("Incorrect answer.");
answer.setCustomValidity("Incorrect answer.");
answer.checkValidity();
//answer.setCustomValidity("");
}
}
};
window.addEventListener("DOMContentLoaded", function ()
{
form = document.getElementById("testForm");
answer = document.getElementById("answer");
form.addEventListener("submit", validateForm, false);
}, false);
}());
</script>
</body>
</html>
输入错误答案,输入除“a”以外的任何字母,然后按 Enter 键。 输入正确答案“a”,然后按 Enter。
在不更改测试用例的情况下,Opera、Firefox 和 Chrome 中的行为是相同的(Chrome 错误除外)。无论答案正确与否,验证错误消息都会持续存在。
现在,在 answer.setCustomValidity(""); 取消注释后,Opera 会清除自定义验证错误但不会关闭验证错误消息,这正是我所期望的。另一方面,Firefox 和 Chrome 都清除自定义验证错误并关闭验证错误消息(错误?)。
BUG:Chrome 在首次调用时不会“checkValidity()”。
在 Chrome 中,answer.checkValidity(); 不会在第一次提交后显示验证消息。后续提交显示验证错误消息。
http://code.google.com/p/chromium/issues/detail?id=95970
BUG:在 Chrome 中,当输入更改时,验证错误消息为空白但未关闭。
http://code.google.com/p/chromium/issues/detail?id=95973
Opera 11.51 Build 1087
火狐 6.0.2
谷歌浏览器 13.0.782.220 m
最佳答案
如果在“提交”事件处理程序中调用了 setCustomValidity(),则不会显示自定义验证消息。
@tkent:
I confirmed Opera 11.50 worked as your expectation, but Firefox 6 and Chrome 14 didn't.
However, Chrome's behavior is correct according to the standard.
- If the submitted from submit() method flag is not set, and the submitter element's no-validate state is false, then interactively validate the constraints of form and examine the result: if the result is negative (the constraint validation concluded that there were invalid fields and probably informed the user of this) then abort these steps.
- If the submitted from submit() method flag is not set, then fire a simple event that is cancelable named submit, at form. If the event's default action is prevented (i.e. if the event is canceled) then abort these steps. Otherwise, continue (effectively the default action is to perform the submission).
浏览器必须在“提交”事件之前调用交互式验证 被解雇了。您需要在“提交”事件之前调用 setCustomValidity() 如果您希望浏览器显示验证消息。歌剧似乎 以错误的顺序处理这些步骤。请注意 checkValidity() 在 你的代码无论如何都没有效果。 checkValidity() 从不显示 验证消息。
http://code.google.com/p/chromium/issues/detail?id=95970
[错误 11287] 新:元素中的“setCustomValidity”调用应使用“oninput”事件...
@尼克:
'setCustomValidity' call in element should use 'oninput' event...
http://lists.w3.org/Archives/Public/public-html/2010Nov/0186.html
回复:[whatwg] 表单元素无效消息
@Mounir Lamouri:
So, what you do is making the element valid in the invalid event which is too late. After the invalid event, Firefox tries to show the UI using the validationMessage which return the empty string when the form is valid. You should cancel the event if you want to have no UI at all but still cancel the submission. You should use onchange/oninput (emphasis added) to change the validity state if you want the form to be submitted.
http://www.mail-archive.com/whatwg@lists.whatwg.org/msg23762.html
解决方法是使用“输入”事件处理程序而不是“提交”事件处理程序来验证输入。
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta charset="utf-8"/>
<title>Validation test case</title>
</head>
<body>
<form id="testForm">
<input type="text" id="answer" pattern="[A-Za-z]+" autofocus required/>
<input type="submit" value="OK"/>
</form>
<script>
/*jslint browser: true, vars: true, white: true, maxerr: 50, indent: 4 */
(function (console)
{
"use strict";
var form = null;
var answer = null;
var isCorrectAnswer = function (value)
{
return (value === "a");
};
var closeValidation = function (element)
{
// Close the form validation error message if displayed.
element.blur();
element.focus();
};
var validateForm = function (event)
{
event.preventDefault();
event.stopPropagation();
var isValidForm = event.target.checkValidity();
if (isValidForm)
{
console.log("Correct answer.");
closeValidation(answer);
form.reset();
}
else
{
console.log("Incorrect answer.");
}
};
window.addEventListener("DOMContentLoaded", function ()
{
form = document.getElementById("testForm");
answer = document.getElementById("answer");
form.addEventListener("submit", validateForm, false);
answer.addEventListener("input", function ()
{
// Only show custom form validation error message if the value matches the pattern.
if (answer.value.match(new RegExp(answer.getAttribute("pattern"))))
{
answer.setCustomValidity(isCorrectAnswer(answer.value) ? "" : "Incorrect answer.");
}
}, false);
}, false);
}(window.console));
</script>
</body>
</html>
关于javascript - 如何在 "setCustomValidity(".. .");"之后清除、删除或重置 HTML5 表单验证状态?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7357192/
出于纯粹的兴趣,我很好奇如何按顺序创建PI,而不是在过程结果之后生成数字,而是让数字在过程本身生成时显示。如果是这种情况,那么数字可以自行产生,我可以对以前看到的数字实现垃圾收集,从而创建一个无限系列。结果只是在Pi系列之后每秒生成一个数字。这是我通过互联网筛选的结果:这是流行的计算机友好算法,类机器算法:defarccot(x,unity)xpow=unity/xn=1sign=1sum=0loopdoterm=xpow/nbreakifterm==0sum+=sign*(xpow/n)xpow/=x*xn+=2sign=-signendsumenddefcalc_pi(digits
我正在尝试测试是否存在表单。我是Rails新手。我的new.html.erb_spec.rb文件的内容是:require'spec_helper'describe"messages/new.html.erb"doit"shouldrendertheform"dorender'/messages/new.html.erb'reponse.shouldhave_form_putting_to(@message)with_submit_buttonendendView本身,new.html.erb,有代码:当我运行rspec时,它失败了:1)messages/new.html.erbshou
我在从html页面生成PDF时遇到问题。我正在使用PDFkit。在安装它的过程中,我注意到我需要wkhtmltopdf。所以我也安装了它。我做了PDFkit的文档所说的一切......现在我在尝试加载PDF时遇到了这个错误。这里是错误:commandfailed:"/usr/local/bin/wkhtmltopdf""--margin-right""0.75in""--page-size""Letter""--margin-top""0.75in""--margin-bottom""0.75in""--encoding""UTF-8""--margin-left""0.75in""-
我想将html转换为纯文本。不过,我不想只删除标签,我想智能地保留尽可能多的格式。为插入换行符标签,检测段落并格式化它们等。输入非常简单,通常是格式良好的html(不是整个文档,只是一堆内容,通常没有anchor或图像)。我可以将几个正则表达式放在一起,让我达到80%,但我认为可能有一些现有的解决方案更智能。 最佳答案 首先,不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案,它会随着HTML的变化而崩溃,或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h
如何在buildr项目中使用Ruby?我在很多不同的项目中使用过Ruby、JRuby、Java和Clojure。我目前正在使用我的标准Ruby开发一个模拟应用程序,我想尝试使用Clojure后端(我确实喜欢功能代码)以及JRubygui和测试套件。我还可以看到在未来的不同项目中使用Scala作为后端。我想我要为我的项目尝试一下buildr(http://buildr.apache.org/),但我注意到buildr似乎没有设置为在项目中使用JRuby代码本身!这看起来有点傻,因为该工具旨在统一通用的JVM语言并且是在ruby中构建的。除了将输出的jar包含在一个独特的、仅限ruby
我正在使用的第三方API的文档状态:"[O]urAPIonlyacceptspaddedBase64encodedstrings."什么是“填充的Base64编码字符串”以及如何在Ruby中生成它们。下面的代码是我第一次尝试创建转换为Base64的JSON格式数据。xa=Base64.encode64(a.to_json) 最佳答案 他们说的padding其实就是Base64本身的一部分。它是末尾的“=”和“==”。Base64将3个字节的数据包编码为4个编码字符。所以如果你的输入数据有长度n和n%3=1=>"=="末尾用于填充n%
我有一个对象has_many应呈现为xml的子对象。这不是问题。我的问题是我创建了一个Hash包含此数据,就像解析器需要它一样。但是rails自动将整个文件包含在.........我需要摆脱type="array"和我该如何处理?我没有在文档中找到任何内容。 最佳答案 我遇到了同样的问题;这是我的XML:我在用这个:entries.to_xml将散列数据转换为XML,但这会将条目的数据包装到中所以我修改了:entries.to_xml(root:"Contacts")但这仍然将转换后的XML包装在“联系人”中,将我的XML代码修改为
查看Ruby的CSV库的文档,我非常确定这是可能且简单的。我只需要使用Ruby删除CSV文件的前三列,但我没有成功运行它。 最佳答案 csv_table=CSV.read(file_path_in,:headers=>true)csv_table.delete("header_name")csv_table.to_csv#=>ThenewCSVinstringformat检查CSV::Table文档:http://ruby-doc.org/stdlib-1.9.2/libdoc/csv/rdoc/CSV/Table.html
为了将Cucumber用于命令行脚本,我按照提供的说明安装了arubagem。它在我的Gemfile中,我可以验证是否安装了正确的版本并且我已经包含了require'aruba/cucumber'在'features/env.rb'中为了确保它能正常工作,我写了以下场景:@announceScenario:Testingcucumber/arubaGivenablankslateThentheoutputfrom"ls-la"shouldcontain"drw"假设事情应该失败。它确实失败了,但失败的原因是错误的:@announceScenario:Testingcucumber/ar
exe应该在我打开页面时运行。异步进程需要运行。有什么方法可以在ruby中使用两个参数异步运行exe吗?我已经尝试过ruby命令-system()、exec()但它正在等待过程完成。我需要用参数启动exe,无需等待进程完成是否有任何rubygems会支持我的问题? 最佳答案 您可以使用Process.spawn和Process.wait2:pid=Process.spawn'your.exe','--option'#Later...pid,status=Process.wait2pid您的程序将作为解释器的子进程执行。除