html5重置,javascript – 如何在“setCustomValidity(”…“)之后清除,删除或重置HTML5表单验证状态;”？...

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.

07000

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).

浏览器必须在“提交”事件之前调用交互式验证

被解雇您需要在“submit”事件之前调用setCustomValidity()

如果您希望浏览器显示验证消息。歌剧似乎

以不正确的顺序处理这些步骤。注意checkValidity()in

你的代码没有任何效果。 checkValidity()从不显示a

验证信息。

[错误11287]新：元素中的’setCustomValidity’调用应该使用’oninput’事件…

@缺口：

‘setCustomValidity’ call in element should use ‘oninput’

event…

Re：[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.

修复是使用“输入”事件处理程序而不是“提交”事件处理程序验证输入。

Validation test case

/*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));