jQuery验证插件使用Ajax提交处理程序无法正常工作 [英] jquery validation plugin with ajax submit handler not working

问题描述

我已经使用了jQuery验证插件，在过去几天了不少，但还没有使用它与一个ajax提交。我有如下削减到两个领域。有提交当值没有错误。没有提交任何发生点击提交按钮时。这只是什么都不做。

HTML：

 ＆LT;形式ID =帐户信息形式的行动=/程序/ p_profile_info.php的方法=邮报＆GT;
    ＆LT; D​​IV CLASS =行间距底-20＆GT;
        ＆LT; D​​IV CLASS =COL-MD-6型组＆GT;
            ＆LT;标签＆gt;名字＆LT; /标签＆gt;
            ＆LT; D​​IV CLASS =输入组＆GT;
                ＆LT;跨度类=输入组插件＆GT;
                    ＆LT;我类=发发用户的FA-FW＆GT;＆LT; / I＆GT;
                ＆LT; / SPAN＆GT;
                ＆LT;输入类=表单控制型=文本名称=FNAME/＆GT;
            ＆LT; / DIV＆GT;
        ＆LT; / DIV＆GT;
        ＆LT; D​​IV CLASS =COL-MD-6型组＆GT;
            ＆LT;标签＆gt;姓＆LT; /标签＆gt;
            ＆LT; D​​IV CLASS =输入组＆GT;
                ＆LT;跨度类=输入组插件＆GT;
                    ＆LT;我类=发发用户的FA-FW＆GT;＆LT; / I＆GT;
                ＆LT; / SPAN＆GT;
                ＆LT;输入类=表单控制型=文本名称=L-NAME/＆GT;
            ＆LT; / DIV＆GT;
        ＆LT; / DIV＆GT;
    ＆LT; / DIV＆GT;
    ＆LT; D​​IV CLASS =行间距底-30＆GT;
        ＆LT; D​​IV CLASS =COL-MD-12＆GT;
            ＆LT;按钮类=BTN BTN-主型=提交名称=账户信息值=保存＆GT;＆LT;我类=发发检查圈＆GT;＆LT; / I＆GT;保存更改LT; /按钮＆GT;
            ＆LT;按钮类=BTN BTN-默认的TYPE =重置＆GT;取消＆LT; /按钮＆GT;
        ＆LT; / DIV＆GT;
    ＆LT; / DIV＆GT;
＆LT; /形式GT;
 

JS：

  $（'＃帐户信息格式）。验证（{
    // AJAX提交
    submitHandler：功能（形式）{
    变量$形式= $（本）;
        $阿贾克斯（{
            类型：$ form.attr（方法），
            网址：$ form.attr（行动），
            数据：$ form.serialize（），
            数据类型：JSON
        }）
        .done（函数（响应）{
            如果（response.success =='成功'）
            {
        警报（成功）;
            }
            其他
            {
                警报（'故障'）;
            }
        }）;
    返回false; //需要阻止，因为你使用AJAX正常提交
    }
}）;
 

解决方案

没有理由这样做，（和 $（本）是你不是什么期待它是）...

 变量$形式= $（本）;
 

只需使用表格说法，真实传递给函数。

  submitHandler：功能（形式）{
    $阿贾克斯（{
        类型：$（形式）.attr（方法），
        网址：$（形式）.attr（行动），
        数据：$（形式）.serialize（）
        数据类型：JSON
    }）
    .done（函数（响应）{
        如果（response.success =='成功'）{
            警报（成功）;
        } 其他 {
            警报（'故障'）;
        }
    }）;
    返回false; //需要阻止，因为你使用AJAX正常提交
}
 

I've used the jquery validation plugin quite a bit in the last few days, but have yet to use it with an ajax submit. What I have is below cut down to two fields. There are no errors for the values when submitting. There is no submission happening whatsoever when clicking the submit button. It just does nothing.

HTML:

<form id="account-info-form" action="/process/p_profile_info.php" method="post">
    <div class="row margin-bottom-20">
        <div class="col-md-6 form-group">
            <label>First Name</label>
            <div class="input-group">
                <span class="input-group-addon">
                    <i class="fa fa-user fa-fw"></i>
                </span>
                <input class="form-control" type="text" name="fname"/>
            </div>
        </div>
        <div class="col-md-6 form-group">
            <label>Last Name</label>
            <div class="input-group">
                <span class="input-group-addon">
                    <i class="fa fa-user fa-fw"></i>
                </span>
                <input class="form-control" type="text" name="lname"/>
            </div>
        </div>
    </div>
    <div class="row margin-bottom-30">
        <div class="col-md-12">
            <button class="btn btn-primary" type="submit" name="account-info" value="save"><i class="fa fa-check-circle"></i> Save Changes</button>
            <button class="btn btn-default" type="reset">Cancel</button>
        </div>
    </div>
</form>

JS:

$('#account-info-form').validate({          
    // ajax submit
    submitHandler: function (form) {
    var $form = $(this);
        $.ajax({
            type: $form.attr('method'),
            url: $form.attr('action'),
            data: $form.serialize(),
            dataType : 'json'
        })
        .done(function (response) {
            if (response.success == 'success')
            {               
        alert('success');                       
            } 
            else
            {
                alert('fail');
            }
        });
    return false; // required to block normal submit since you used ajax
    }
});

解决方案

There is no reason to do this, (and $(this) is not what you're expecting it to be)...

var $form = $(this);

Simply use the form argument that's passed into the function.

submitHandler: function (form) {
    $.ajax({
        type: $(form).attr('method'),
        url: $(form).attr('action'),
        data: $(form).serialize(),
        dataType : 'json'
    })
    .done(function (response) {
        if (response.success == 'success') {               
            alert('success');                       
        } else {
            alert('fail');
        }
    });
    return false; // required to block normal submit since you used ajax
}

这篇关于jQuery验证插件使用Ajax提交处理程序无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！