Question

这个小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。

你能发现错误吗？

Answer 1

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

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

Answer 2

由于我偶然发现了同样的问题，这是我的解决方案 - 经过测试并使用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');现在根据验证结果设置错误字符串。如果该字段有效，则它必须为空，否则可以设置自定义错误字符串。

Answer 3

我喜欢这样使用：

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

并拔掉所有有效输入数据

UPD ，还有一件事要做得更好：

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

Answer 4

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

Answer 5

尽管该问题的答案提供了很好的信息，但仍不足以满足我的需求。根据哪个有效性规则失败，我需要显示不同的消息。在其他示例中，所有验证失败均使用相同的验证失败消息。

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

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

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

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

5 个答案: