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

【问题标题】：Why does my "oninvalid" attribute let the pattern fail?为什么我的“oninvalid”属性让模式失败？
【发布时间】：2013-05-27 20:56:24
【问题描述】：

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

<form>
    <input type="password" name="user_password_new" pattern=".{6,}" required />      
    <input type="submit"  name="register" value="Register" />
</form>

请参阅 jsFiddle here。

但是当我添加一个 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 here。

你能找出错误吗？

【问题讨论】：

标签： html input

【解决方案1】：

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

表单对象的“有效性”属性是创建多个验证失败消息的关键。

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

https://www.w3schools.com/js/js_validation_api.asp

这个例子展示了如何显示两种不同的验证信息。如果您取消注释下面的 console.log() 行，您可以在输入字段时观察有效性属性的变化。

<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”和“stepMismatch”属性；类型=“数字”。

【讨论】：

【解决方案2】：

我喜欢这样使用：

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

并为所有有效输入数据拔掉电源

UPD，为了更好的工作还有一件事：

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

【讨论】：

我认为这是最简单的解决方案+1

【解决方案3】：

由于我偶然发现了同样的问题，这里是我的解决方案 - 测试并使用 FF、Chrome、IE 10、Edge（2017 年 2 月）。

<form>
<input pattern="1234" oninput="setCustomValidity(''); checkValidity(); setCustomValidity(validity.valid ? '' :'please enter 1234');">
<input type="email" required>
<input type="submit">
</form>

说明：

setCustomValidity(''); 删除自定义错误字符串，否则在验证过程中总是会导致无效字段。

checkValidity(); 进行手动验证 - 与提交表单时相同。结果存储在validity.valid。

第二个setCustomValidity(validity.valid ? '' :'please enter 1234'); 现在根据验证结果设置错误字符串。如果该字段有效则需要为空，否则可以设置自定义错误字符串。

【讨论】：

这确实符合我的需要，它删除了'You must use this format:' 消息。谢谢和+1

【解决方案4】：

您可以使用title，只要您不介意在消息前加上'You must use this format:'。如果您想要完整的自定义消息，setCustomValidity() 为我工作。

【讨论】：

【解决方案5】：

如果您使用setCustomValidity() 设置值，则该字段无效。即设置非零长度字符串会导致浏览器认为该字段无效。为了允许任何其他验证的效果，您必须清除自定义有效性：

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

【讨论】：

您先生，是我的英雄！完美的答案。非常感谢！
一个很好的解释。该问题的一个更简单的解决方案是删除oninvalid 属性并使用value 属性代替包含预期数据格式的简短说明。这是 HTML5 CR 中推荐的方式。属性value="Minimum length is 6 characters" 既可以用作澄清错误消息，也可以用作鼠标悬停时的工具提示。
@JukkaK.Korpela：我认为您的意思是 title 属性。
@TimYates，你是对的。在我的评论中阅读value 的两次出现title。
注意，我认为这不适用于单选按钮，但这是因为我只在第一个按钮上这样做了，而且在这种情况下它碰巧被禁用了。似乎，至少在 Chrome 中，错误消息来自第一个启用的单选按钮。因此，不幸的是，为了确保始终使用自定义消息，需要在每个无线电输入上进行设置。根据单选按钮的数量，在 JS 中可能会更好。