检查表单是否提交成功html5答案

【问题标题】：check if form is submitted successfully html5检查表单是否提交成功html5
【发布时间】：2014-06-09 16:42:57
【问题描述】：

我有以下代码。

<div class="form-group">
    <label for="store_account_name">Store Title</label>
    <input type="text" value="" class="form-control" name="store_account_name" id="store_account_name" placeholder="Please insert store title of the external store" required />
</div>
<div class="form-group">
    <label for="store_url">Store URL</label>
    <input type="url" value="" class="form-control" name="store_url" id="store_url" placeholder="Please insert store URL as described in help section" required />
</div>

在提交按钮上，我想检查表单是否经过验证。我有一个具有 preventDefault 按钮的侦听器事件。因此，我只想在成功验证这两个输入时才发送 ajax 调用。是否有任何 JS 函数来检查验证状态或任何 css 属性添加到无效字段。

【问题讨论】：

现在提交表单时，即使未验证字段，也会进行 ajax 调用。只有在成功验证字段时才应进行 Ajax 调用。
请更改标题。你需要这样的东西：'在提交表单时添加事件监听器'。您绝对不需要检查表单是否已提交。

标签： javascript jquery ajax html forms

【解决方案1】：

试试这个功能：

    $("input[type='submit']").click(function () {
    var form = $(this).parents("form:first");
    form.submit(function () {
        //  validate submitted successfully according to html validation
        //  ajax here
    });
});

【讨论】：

【解决方案2】：

如果您将 php 和 json 用于您的计划，那将像其他伟大的项目一样清晰且回答得很好。 if form submittet redponse to clients 结果 if not throw an error via json.

【讨论】：

【解决方案3】：

您应该使用表单的onsubmit 事件。听起来您正在监听提交按钮的点击事件，这是不正确的。

表单的提交事件只会在表单有效时触发。如果表单无效，HTML5 验证规则将阻止此事件触发。

jsFiddle demo

$('#myform').submit(function(e){
    e.preventDefault();

    // do ajax now
    console.log("submitted"); 
});

【讨论】：

即使字段没有被验证，它也会做ajax。
完全不正确。如果表单无效，它不会触发。请参阅答案中的小提琴。
感谢您的回答是正确的。问题是我包含了一个会产生问题的 js 文件。该 js 文件要求表单具有 data-validate="true" 属性，并且在放置它时会覆盖其功能。
它没有回答“检查表单是否成功提交html5”的问题。您的示例仅显示如何进行 ajax 调用并防止默认表单提交。也许答案解决了提问者的问题，但仅此而已。问题是开放的。从 jsfiddle 示例中删除 required 属性，您的代码将无法正常工作。

【解决方案4】：

根据您的评论，我认为这就是您要找的-

在“form”的“onsubmit”属性上调用一个函数。在该函数中，进行验证，如果字段有效，则进行 ajax 调用，否则不进行。

【讨论】：