37

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

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

请参阅此处的 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 。

你能发现错误吗？

4

5 回答 5

114

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

<input type="password" name="user_password_new" pattern=".{6,}" required
   oninvalid="setCustomValidity('Minimum length is 6 characters')" 
   oninput="setCustomValidity('')" />
于 2013-06-02T00:54:38.930 回答
18

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

于 2017-02-23T17:11:56.090 回答
4

我喜欢这样使用：

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

并拔出所有有效输入数据

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

    $("input").attr("onblur", "setCustomValidity('')");
    $("input").attr("oninput", "setCustomValidity(' ')");
于 2017-05-18T11:48:25.070 回答
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”属性；类型=“数字”。

于 2018-11-05T19:22:14.283 回答
0

title只要您不介意'You must use this format:'在您的消息之前使用，您就可以使用。如果您想要完整的自定义消息，那setCustomValidity()对我有用。

于 2015-05-13T14:49:50.050 回答