javascript - 无法设置 cuctom html5 验证消息

Question

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

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

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

Working jsFiddle of my situation

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(change valid .. 等等，我得到的是 alert() 机器人，而不是更改后的文本。

任何帮助将不胜感激，我厌倦了这个“错误”？

Answer 1

but for some reason, the message is empty.

那是因为您明确将其设置为空:

field.setCustomValidity('');

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

Any help will be appreciated

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

$('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)