Question

我想手动显示html 5验证消息（即通过代码）。根据我的理解，没有直接的方法来调用此消息。但是，我们可以通过提交按钮点击它。

当您点击html正文时，我尝试带来验证消息（如果该字段无效）：

// if url is invalid, display the error message.
if(!$('#theurl')[0].checkValidity()){

    console.log('Button Click');
    $('#btn').click();

}

Here is the jsfiddle也是如此。不幸的是，上面的代码正在崩溃。我不知道为什么。相反，如果你手动点击假按钮，它可以正常工作。

请帮助我完成此任务。

Answer 1

问题是你的Click功能是参数'e'，但你正在寻找参数“event”。

$('body').click(function(e){

电话

    $(event.target)

将其更改为“e.target”并且有效：

http://jsfiddle.net/wLCdz/3/

此外，从表单调用checkValidity函数，而不是从表单中的各个项调用。所以，如果你像这样调用checkValidity函数：

document.forms[0].checkValidity()

因为这个原因它会停止崩溃。

Answer 2

在你的jsfiddle中，第22行的代码导致无限循环，最终导致脚本崩溃：

$('#btn').click();

如果您注释掉该行，它就不会崩溃。触发按钮就像你正在做的那样也会导致在body元素上触发另一次点击。

要查看我的意思，请注释掉该行，在表单中放入一个错误的网址，然后点击正文。每次单击都会将消息写入控制台。

Answer 3

试试这个：

<form id="formId">
...
</form>

$('body').click(function(e){

    // ignore, if clicked on the url
    if ($(event.target).closest('#theurl').length) {
        return;
    }

    // ignore, if clicked on the email
    if ($(event.target).closest('#theemail').length) {
        return;
    }

    // ignore, if clicked on the button
    if ($(event.target).closest('#btn').length) {
        return;
    }

    // if url is invalid, display the error message.
    if(!$('#formId')[0].theurl.checkValidity()){

        console.log('Button Click');
        $('#btn').click();

    }

});

通过程序显示HTML 5验证消息

3 个答案: