结合jQueryValidate和ajax表单提交

Combining jQuery Validate and ajax form submission

本文关键字：表单提交 ajax jQueryValidate 结合      更新时间：2023-09-26

我有一个类似的简单表单

<form id="invite_form">
    <input type="text" name="invite_email" id="invite_email" />
    <textarea name="invite_message">Hello!</textarea>
    <div id="send_div">
         <span id="send_btn">Send</span> 
    </div>
</form>

我的JS通过Ajax提交表单如下：

$('#send_btn').live('click', function(event){
    event.preventDefault();
    var form = $('#invite_form');
    $.ajax({
        url: '/invite',
        type: "POST",
        data: form.serialize(),
        dataType: "html",
        success: function(html) {
            $('#send_div').html('Success!');
        }
    });
});

这很好用。

现在，我想围绕这段代码包装一个jQueryValidate函数，以确保[1]电子邮件字段已填充，并且[2]是有效的电子邮件。

我正在使用Jorn的basistance.de jQuery验证插件http://bassistance.de/jquery-plugins/jquery-plugin-validation/.

有人能给出如何将验证调用与此ajax联系起来的路线图吗？

谢谢你的帮助，非常感谢。

试试这个：

$('#send_btn').live('click', function(event){
    event.preventDefault();
    var form = $('#invite_form');
    if(form.valid()) {
        $.ajax({
            url: '/invite',
            type: "POST",
            data: form.serialize(),
            dataType: "html",
            success: function(html) {
                $('#send_div').html('Success!');
            }
        });
    else {
     ;   //do whatever if the form is not valid
    }
});
相关文章：