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事件。听起来你正在听取提交按钮的点击事件，这是不对的。

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

jsFiddle demo

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

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

Answer 2

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

on onsubmit''form'属性调用函数。在该函数中，进行验证，如果字段有效则进行ajax调用，否则不进行。

Answer 3

如果您使用php和json作为您的计划，那将很清楚，并像其他伟大的项目一样回答。如果表单如果没有通过json抛出错误，则会向客户端提交redponse结果。

Answer 4

尝试此功能：

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

检查表单是否成功提交html5

4 个答案: