检查表单是否成功提交html5

Question

我有以下代码。

<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>

在提交按钮上，我想检查表单是否已验证。我有一个listner事件，它具有preventDefault按钮。所以我只想在两个输入都成功验证后才发送ajax调用。是否有任何JS函数来检查验证状态，或者是否有任何CSS属性添加到无效字段。

Answer 1

您应该使用表单的onsubmit事件。听起来您好像在听不正确的“提交”按钮的click事件。

仅当表单有效时才会触发表单的Submit事件。如果表单无效，HTML5验证规则将阻止触发此事件。

jsFiddle demo

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

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

Answer 2

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

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

Answer 3

尝试此功能：

    $("input[type='submit']").click(function () {
    var form = $(this).parents("form:first");
    form.submit(function () {
        //  submitted successfully
    });
});

Answer 4

如果您将php和json用于您的计划，它将很清楚，并且像其他出色的项目一样回答还不错。如果表单未提交，则如果未通过json引发错误，则将结果重新发送给客户端。