在JavaScript中显示本机验证消息

Question

我目前正在开发一个由HTML5功能和jQuery驱动的表单。我一直负责的事情之一是确保本机支持验证的浏览器仍然可以使用本机“请填写此字段”消息。

我的设置如下：

|----------|
|   FORM   |
|----------|
===BUTTON===

表单有几个部分，所以按钮都是global。如果完成，表单将滑动到下一部分。

以下是我现在所拥有的内容，它正确地将按钮事件触发到表单并触发submit事件。

$(".next").click(function() {
    var $incoming = $(".nextPart #" + (currentSlide));
    var incomingID = $incoming.data("cardid");
    var partCode = "form-" + incomingID;

    $("form[name='" + partCode + "']").trigger("submit");
});

$("form").bind('submit', function(event) {
    var goForth = true;

    if(!event.currentTarget.checkValidity()) goForth = false;

    if(!goForth) return false;

    /* Do some stuff with progress bar and more things */

    return true;
});

但是，即使表单提交失败，也没有验证消息。有没有办法在元素上实际启动它，或者我做了一些愚蠢的事情？

为了澄清，这是我所关注的验证消息的屏幕截图。

Answer 1

而不是event.currentTarget.checkValidity - 这样做......

function checkValidity(elem) {
 // check validity here
 // retun true/false
}

然后在你的提交处理程序中执行此操作...

if(checkValidity(event.currentTarget)) { ... 

此外，trigger原生浏览器事件通常不是一个好主意 - trigger适用于自定义事件 - 如果您需要提交表单，可以调用{{1}像这样的表单对象的方法..

submit()

Answer 2

正如我在第一篇文章中所描述的那样，我在一个全球范围内的按钮上使用click事件。然后，这会向表单发送一个submit操作，虽然它正在发送要提交的表单，但它并没有触发元素上的泡沫事件（不管它到底是什么）。

为了解决这个问题，我将所有幻灯片包装在一个表单中，而不是多个。我在幻灯片之外保留了提交按钮，因此它仍然充当全局导航项。

从此按钮中移除click事件并将其类型更改为submit现在会显示气泡。

不是最好的解决方案，因为泡泡应该能够在不必提交表单的情况下触发，但是，我想通过HTML5验证，您可以为接受的内容和不接受的内容定义参数。