無法設置cuctom html5驗證消息

Question

我正在嘗試使用瀏覽器驗證消息。 當2個字段不相同時，我無法定義自定義消息。

我的情況是我必須測試字段是否有效，所以我使用jquery on.blur進行測試，但由於某種原因，消息是空的。

嘗試輸入2個有效但不同的電子郵件地址 預期的結果應該是“測試為什么不工作”有瀏覽器消息。

工作jsFiddle我的情況

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() bot而不是更改的文本。

任何幫助將不勝感激，我對這個'錯誤'感到厭倦？

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");
    }
});

（ 更新演示 ）