3

我想使用 ajax 提交表单。所以我没有使用type=submit. 我正在使用onClick链接（<a>）上的事件来使用 ajax 发送表单数据。我还想利用 HTML5 表单验证功能。
所以在发送数据之前，我使用该函数.checkValidity来检查表单的有效性。
如果它返回true，那么我发送数据。但是当它返回 false 时，我想使用 HTML5 默认通知方案向用户显示表单无效。但我不知道如何触发它。

有没有办法以编程方式显示表单的验证。

一种方法是在checkValidity返回 false 时触发提交事件。但这会刷新页面。我不想改变页面的状态。

checkValidity只检查有效性并通知程序。它不会以交互方式通知用户。

4

2 回答 2

1

我们有完全相同的问题，我们尝试了非常不同的东西，其中很多都是像伪提交和 event.preventDefault() 方法这样的黑客攻击。总而言之，我必须说 HTML5 验证总体上很好，但在实践中却非常糟糕，因为它不可能像显示前端验证错误一样显示后端验证错误。

只有天知道为什么 HTML5 的人没有想到一个简单的 API，我们可以像这样触发验证 element.triggerValidationMessage('my message');

于 2012-12-14T16:28:28.200 回答
1

如果你让你的表单有一个提交按钮并返回 false，你可以做到这一点！您可以在与未提交者相同的事件处理程序中执行此操作！因此，首先测试您是否是表单的一部分，如果是，请检查有效性并且永远不要返回 true（即使有效）！

$('.ajx')   
    .on("submit click", function(e) {

        var $this           = $(this)

        //Force native form validating and notification
        form = $this.closest('form')[0]
        if (form) {
            //Follow through with form submit (element must be of submit type!)
            if(!form.checkValidity()) {
                //don't ask me!
                sleep(3000);
                return false
            }
        }           

        //only preventDEfault AFTER possible form element click
        e.preventDefault()

        //...your project further ajax code
        //Makes sure your form never submits
        if (e.type=='submit') return false
}

小缺点：您必须在提交按钮上执行此操作，但始终可以将您的更改<a>为type=submit. 不过，您不必更改非 form <a>！

于 2018-12-25T13:22:01.600 回答