Question

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

是否有任何方法可以显示以编程方式验证表单。

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

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

Answer 1

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

只有上帝知道为什么HTML5人员没有想到一个简单的API我们可以触发验证，就像这个element.triggerValidationMessage（'我的消息'）;

Answer 2

如果让表单具有提交按钮并返回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。不过，您不必更改非格式<a>！

以编程方式显示表单默认验证状态

2 个答案: