Html 为什么我的；“oninvalid”；属性让模式失败？

这个小小的HTML5密码字段在没有oninvalid属性的情况下可以完美工作（模式显示：至少6个字符）：

请参阅jsFiddle

但是，当我添加一个oninvalid属性，当用户的输入不符合模式时，该属性会发出一条自定义错误消息，整个字段将永远无效，请参见此处的代码：

<form>
    <input type="password" name="user_password_new" pattern=".{6,}" oninvalid="setCustomValidity('Minimum length is 6 characters')" required />      
    <input type="submit"  name="register" value="Register" />
</form>

请参阅jsFiddle

---

您能发现错误吗？

如果您使用

setCustomValidity（）

设置值，则该字段无效。即设置一个非零长度字符串使浏览器考虑字段无效。为了考虑任何其他验证的影响，您必须清除自定义有效性：

<input type="password" name="user_password_new" pattern=".{6,}" required
   oninvalid="setCustomValidity('Minimum length is 6 characters')" 
   oninput="setCustomValidity('')" />

您可以使用

标题

，只要您不介意在您的邮件之前使用

“您必须使用此格式：”

。如果您想要完整的自定义消息，则

setCustomValidity（）

对我有效。

由于我遇到了相同的问题，以下是我的解决方案–使用FF、Chrome、IE 10、Edge进行测试和工作（2017年2月）

---

我喜欢这样使用：

<input type="email" name="Email" required oninvalid="setCustomValidity('ErrorMessage')"/>

---

虽然这个问题的答案有很好的信息，但它们不足以满足我的需要。我需要根据失效的有效性规则显示不同的消息。在其他示例中，相同的验证失败消息用于所有验证失败

表单对象的“validity”属性是创建多条验证失败消息的关键

您可以在此网站上查看所有不同的“有效性”属性

此示例显示如何显示两条不同的验证消息。如果取消注释下面的console.log（）行，则可以在键入字段时看到validity属性的更改

<label for="user_password_new">New Password:</label>
<input type="password" name="user_password_new" id="user_password_new"
    pattern=".{6,}"
    value=""
    required
    oninput="
        setCustomValidity('');
        checkValidity();
        // console.log(validity);
        if (validity.patternMismatch) {
            setCustomValidity('Please enter at least six characters.');
        }
        else if (validity.valueMissing) {
            setCustomValidity('This field is required.');
        }
        else if (validity.valid) {
            setCustomValidity('');
        }
        // allow default validation message to appear for other validation failures
    "
>

新密码：

---

注意：一些有效性检查是“类型”特定的。例如，如果type使用“rangeOverflow”、“rangeUnderflow”和“StepMitch”属性，则会设置这些属性；type=“number”。

先生，您是我的英雄！完美答案。谢谢！一个很好的解释。解决此问题的一个更简单的方法是删除

oninvalid

属性，并使用

value

属性来包含预期数据格式的简短说明。这是HTML5 CR中推荐的方法。属性

value=“最小长度为6个字符”

既可以用来澄清错误消息，也可以作为鼠标上方的工具提示。@JukkaK.Korpela:我想你指的是

title

属性。@TimYates，你说得对。将我的评论中出现的两个

value

读作

title

。注意，我认为这对单选按钮不起作用，但这是因为我只在第一个按钮上使用了它，而在这种情况下它恰好被禁用。看起来，至少在Chrome中，错误消息来自第一个启用的单选按钮。因此，为了确保始终使用自定义消息，不幸的是，需要在每个无线电输入上设置自定义消息。根据单选按钮的数量，最好只使用JS。这确实符合我的需要，并且删除了“您必须使用此格式：”消息。谢谢和+1我认为这是最简单的解决方案+1

    $("input").attr("onblur", "setCustomValidity('')");
    $("input").attr("oninput", "setCustomValidity(' ')");

<label for="user_password_new">New Password:</label>
<input type="password" name="user_password_new" id="user_password_new"
    pattern=".{6,}"
    value=""
    required
    oninput="
        setCustomValidity('');
        checkValidity();
        // console.log(validity);
        if (validity.patternMismatch) {
            setCustomValidity('Please enter at least six characters.');
        }
        else if (validity.valueMissing) {
            setCustomValidity('This field is required.');
        }
        else if (validity.valid) {
            setCustomValidity('');
        }
        // allow default validation message to appear for other validation failures
    "
>