javascript - HTML5自定义Validity-如何绘制？

Question

我正在尝试使用 HTML 5 验证进行用户登录。但是，提交表单后，我使用 ajax 在服务器上进行身份验证。如果失败，我将使用 setCustomValidity(msg) 方法。但是，该方法不会绘制/显示验证消息，而是在下次提交或更改时显示它。我怎样才能强制它立即绘制？

此外，还有一个 maxlength 约束，但是有 minlength 吗？

下面是 HTML 表单和 javascript。提交后，如果表单无效，则会设置消息但不会绘制消息。

$(function() {
    $('form#login_form').submit(function(e) {
        console.log("submit");
        $.post('/auth_user', $(this).serialize(), function (data) {
            console.log(data);
            if(data != "") {
                login_password.setCustomValidity(data);
            }
        });
        e.preventDefault();
    });
});

<form action="/dashboard" id="login_form" method="post">
                    <div class="field-wrap">
                        <label>
                            Email Address<span class="req">*</span>
                        </label>
                        <input type="email" name="email" id="login_email" required autocomplete="off"/>
                    </div>
                    <div class="field-wrap">
                        <label>
                            Password<span class="req">*</span>
                        </label>
                        <input type="password" name="password" id="login_password" required autocomplete="off"/>
                    </div>
                    <p class="forgot"><a href="#">Forgot Password?</a></p>
                    <button type="submit" class="btn btn-lg btn-primary"/>Log In</button>
</form>

Answer 1

从技术上讲，reportValidity如果表单的任何元素无效，form 元素上的函数应显示相应的验证消息。

不过，根据该链接底部的兼容性矩阵，截至 2017 年 1 月 5 日，它无法在 Internet Explorer 或 Safari 中运行。