用AJAX提交HTML 5表单?

I got some trouble submitting a form with ajax.

我在提交ajax表单时遇到了麻烦。

Since HTML5 Form already have "required" validation within the input tag, there is no need for javascript validation check. However, because of that, I don't know how to use javascript(jQUERY) to submit a form AFTER those validation checks have been passed. In other words, how do I know whether the validations checks has passed or not?

由于HTML5表单已经在输入标签中进行了“必需”的验证，所以不需要进行javascript验证检查。然而，正因为如此，在通过了验证检查之后，我不知道如何使用javascript(jQUERY)提交表单。换句话说，我如何知道验证是否通过?

e.g : ??condition?? (What condition should I put before loading the submitted page)? ("div").load(finishSubmittingForm.html) )};

e。g:? ? ? ?(在载入所提交的网页前，我应设定什么条件?)(" div ").load(finishSubmittingForm.html)};

Any idea?

任何想法?

Thanks

谢谢

2 个解决方案

#1

There are some API methods available. See developer.mozilla.org.

有一些可用的API方法。见developer.mozilla.org。

However, I would strongly advise you think carefully before relying on HTML5 validation. It definitely has some major drawbacks at this point in time, as it is still "in its infancy". I would say that for now, you would be better off using a JS validation library; jQuery Validation is excellent.

但是，我强烈建议您在依赖HTML5验证之前要三思。在这个时候，它肯定有一些主要的缺点，因为它仍处于“初期”。我想说，现在你最好使用JS验证库;jQuery验证是优秀的。

#2

from specification:

从规范:

If the user presses the submit button. The browser has to first validate the form and if the form is valid, the submit event is fired.

如果用户按了提交按钮。浏览器必须首先验证表单，如果表单有效，则会触发提交事件。

This means, that you can simply hook into the form's submit event and start your ajax.

这意味着，您可以简单地挂钩到表单的submit事件并启动ajax。

$('form').bind('submit', function(){
    //Ajax implementation here
});

But, Opera has a really nasty bug here. Opera first fires the submit event and then validates the form.

但是，歌剧有一个非常讨厌的问题。Opera首先触发提交事件，然后验证表单。

You can workaround this, by using the validation methods of HTML5. This would look like this:

您可以通过使用HTML5的验证方法来解决这个问题。这是这样的:

$('form').bind('submit', function(){
    if(!this.checkValidity || this.checkValidity()){
        //Ajax implementation here
    }
});

About the current state of the HTML5 form spec. There are some parts, that should extend the form spec. The features, which are currently implemented in FF4 and others (FF4 has less form features than Opera and Chrome, but very good implementation) are stable enough for production.

关于HTML5表单规范的当前状态，有一些部分应该扩展表单规范，目前在FF4和其他版本中实现的特性(FF4的表单特性比Opera和Chrome要少，但是很好的实现)对于产品来说是足够稳定的。

If you want to use HTML5 forms in all browsers, I would suggest the webshims HTML5 forms polyfill. It not only polyfills the incapable browsers, but also fixes some bugs in browsers, which haven't implemented the form feature according to the spec. For example, the Opera bug mentioned above will be automatically fixed.

如果您想在所有浏览器中使用HTML5表单，我建议您使用webshims HTML5表单polyfill。它不仅对不具备能力的浏览器进行了修饰，还修复了浏览器中的一些bug，这些bug并没有按照规范来实现表单功能，例如上面提到的Opera bug会自动修复。

#1