Question

我正在为我们的网站创建一个电子邮件表单。我构建了using HTML5 and CSS表单以利用browsers' built-in validation（使用this shim来避免兼容性问题）。现在我想添加一个“确认您的电子邮件地址”字段，除非与“输入您的电子邮件地址”字段匹配，否则该字段不应标记为有效。

我写了一些JavaScript来比较这两个字段。有没有办法让JavaScript将字段标记为浏览器内置验证的有效/无效？或者我是否需要切换到第三方验证插件才能获得此功能？

Answer 1

在发布问题后立即找到the answer。您在该字段上调用<element>.setCustomValidity()，传入一个空字符串以将该字段设置为有效。如果它无效，则代之以传递一个字符串。

这是我的代码：

$('#emailConfirmation').on('keyup', function() {
    if ($('#emailConfirmation').val() == $('#email').val()) {
        $("#emailConfirmation")[0].setCustomValidity("");
    } else {
        $("#emailConfirmation")[0].setCustomValidity("Check that you've typed your email address the same way in both places.");
    }
});

这里再次没有jQuery：

document.getElementById('emailConfirmation').onchange = function() {
    if (document.getElementById("emailConfirmation").value == document.getElementById("email").value) {
        document.getElementById("emailConfirmation").setCustomValidity("");
    } else {
        document.getElementById("emailConfirmation").setCustomValidity("Check that you've typed your email address the same way in both places.");
    }
}

添加到浏览器的内置表单验证

1 个答案: