Javascript 在发送ajax提交之前验证表单

编辑：为了澄清，这是一个引导模式的内部，按钮在表单外部的页脚中。我无法进行常规表单提交，因为我必须将提交按钮的位置更改为表单内部，我不想这样做-它需要留在页脚内部

在通过ajax提交表单之前，我试图检查是否填写了必填字段，但我遇到的所有答案都表明我应该使用jquery.validate（）插件，我不想使用任何其他插件。这可能吗

HTML:

---

}))

如果您希望html5验证按预期使用表单外的按钮。您需要在表单中放置隐藏按钮，并让可视按钮单击另一个按钮以强制html5验证

var form=$（“#事件形式”）；
表单（'submit'，函数（）{
//执行ajax请求吗
});
$（“#提交表单”）。在（'click'，function（）上{
$（'real submit'）。单击（）；
})

body.modal{
位置：相对位置；
顶部：自动；
右：自动；
底部：自动；
左：自动；
z指数：1；
显示：块；
}
模态对话框{
左：自动；
利润率：20px；
}

&时代；
新事件
事件名称
全天活动？
不
对
开始
终点
接近
保存事件

当然，您可以在ajax请求之前验证表单。但是您必须写下自己的验证，检查所有输入，以确保其值满足您的要求

如果要在按下“提交”按钮后验证表单，可以执行以下操作：

$('your-form').on('submit', function(e) {
    e.preventDefault(): //this prevent the normal submit processed by the browser


    //your validation here

    //if everything is ok
    $.ajax({...})

});

如果要在按下提交按钮之前验证表单，则可以在输入模糊/更改时执行，如下所示：

$('your-form input').each(function(e) {
    $(this).on('blur', function() {
        //your validation here
    });
});

在这两种情况下，您都可以通过以下方式触发提交，将提交按钮保持在表单外部：

$('your-submit-button').on('click', function() {
    $('your-form').submit();
});

---

您不需要创建多个按钮，只需触发

我还没有使用jQuery验证插件，但我怀疑它所做的只是获取每个输入字段，并根据您为插件指定的某些规则验证其值。你可以通过在所有输入字段上循环，并对每个字段验证值来做同样的事情。虽然这是真的，但根本不能回答海报的问题。问题是，我使用的是引导模式，提交按钮卡在表单外模式的页脚中。我可以把它移到模态的主体中，但那样它就不好看了；您可以在按钮上绑定一个事件，然后提交表单。问题仍然是，因为我使用的是引导模式，所以我必须将提交按钮从页脚移到正文中，作为表单的一部分。如果在提交之前执行e.preventDefault（），它将永远不会执行提交。你是对的，对不起。这是我的错。Not.submit（），我们必须执行ajax请求。#Nyx是最好的，尝试执行此代码$（'#事件形式'）。off（'submit'）。on（'submit'，function…@Anon:我更改了答案中的事件顺序，以便首先执行验证，如果验证失败，请调用e.preventDefault（）。

$('your-form').on('submit', function(e) {
    e.preventDefault(): //this prevent the normal submit processed by the browser


    //your validation here

    //if everything is ok
    $.ajax({...})

});

$('your-form input').each(function(e) {
    $(this).on('blur', function() {
        //your validation here
    });
});

$('your-submit-button').on('click', function() {
    $('your-form').submit();
});