Question

我正在尝试使用浏览器验证消息。当2个字段不相同时，我无法定义自定义消息。

我的情况是我必须测试字段是否有效，所以我使用jquery on.blur来测试，但由于某种原因，消息是空的。

尝试输入2个有效但不同的电子邮件地址。预期的结果应该是“测试为什么不工作”有浏览器消息。

HTML：

<form id="newsletter_form" class="form" role="form" name="newsletter_form" method="post" action="/" autocomplete="off">
    <div class="row">
        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
            <input type="email" class="form-control" name="email" id="email" value="" maxlength="250" placeholder="email" aria-required="true" required="required" />
        </div>
        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
            <input type="email" class="form-control" name="confirm_email" id="confirm_email" value="" maxlength="250" placeholder="confirm email" aria-required="true" required="required" />
        </div>
    </div>
    <input type="submit" class="btn submit btn-default" value="submmit!" />
</form>

JAVASCRIPT：

$('form #email').on('change invalid', function () {
    var field = $(this).get(0);
    field.setCustomValidity('');
    if (!field.validity.valid) {
        field.setCustomValidity("custom email invalid");
    }
});


/* THIS IS MY BUGGY ONE */
$('form #confirm_email').on('blur valid', function () {
    var field = $(this).get(0);
    field.setCustomValidity('');
    if ($("#email").val() != $("#confirm_email").val()) {
        /* i tried setting the field to invalid, nothing */
        //field.validity.invalid;
        //alert('s');
        field.setCustomValidity("test why not working");
    }
});

$('form #confirm_email').on('change invalid', function () {
    var field = $(this).get(0);
    field.setCustomValidity('');
    if (!field.validity.valid) {
        field.setCustomValidity("custom error message");
    }
});

我尝试了jquery.on（更改有效..等等，我得到alert()机器人而不是更改的文本。

任何帮助将不胜感激，我对这个'错误'感到厌倦？

Answer 1

但由于某种原因，该消息为空。

那是因为你明确地将它设置为空：

field.setCustomValidity('');

在您的“自定义错误消息”处理程序中，该处理程序用于破坏无效的电子邮件。该处理程序在'blur valid'之后执行，并将始终重置之前发生的事情。您可以通过取消注释以上行来尝试。

任何帮助将不胜感激

在同一个处理程序中检查两个原因：

$('form #confirm_email').on('change valid invalid', function () {
    // var field = $(this).get(0); -- don't do this!!! field = this.

    this.setCustomValidity('');
    if (!this.validity.valid) {
        this.setCustomValidity("custom message for standard errors");
    } else if ($("#email").val() != this.value) {
        this.setCustomValidity("test now working");
    }
});

（updated demo）

无法设置自定义html5验证消息

1 个答案: