如何通过jQuery工具使用服务器验证和客户端验证？

Question

好的，所以我在jQuery叠加层中具有以下形式：

<div class="profile_about_edit_container" id="profile_about_edit_container">
    <form id="profile_edit_form" name="profile_edit_form" method="post" action="validation.php">
        <label>First Name:</label>
        <input type="text" name="firstname" maxlength="50" size="30">
        <label>Last Name:</label>
        <input type="text" name="lastname" maxlength="50" size="30">
        <button type="submit" class="save">Save</button>
        <button class="close">Cancel</button>
    </form>
</div>

这是使用<a>与class =“ profile_popups_form”和以下Javascript一起显示的：

$(document).ready(function() {
    $(".profile_popups_form").overlay({
    });
});

这可以正确显示，然后validation.php随后回显一系列错误消息，如下所示：

if (count($errors) > 0) {
    echo json_encode($errors);
}

但是现在我正在尝试在此表单上使用jQuery客户端和服务器验证。

我尝试了这个：

$(document).ready(function(){
    var form = $("#profile_edit_form");

    $("#profile_edit_form").submit(function(e) {
    e.preventDefault();

    var input = $("#profile_edit_form").validator();
    $.getJSON(form.attr("action") + "?" + form.serialize(), function(json) {
        if (json !== '') {
            input.data("validator").invalidate(json);
        }
        else
            $('#profile_edit_form').unbind('submit').submit();
    });
});

为了提交表单并以jQuery工具验证的正常方式显示此错误消息数组。 但是我没有运气。

我要达到这个权利吗？ 如果是这样，我在做什么错？ 我不确定是不是Javascript引起了问题，还是我在逻辑上正确地做到了这一点。 我几乎找不到任何资源来解释如何成功地将JQuery Tools Validation与PHP结合使用。

当前，该数组仅显示在屏幕上，就像您回显文本一样。

我使用以下资源获取用于返回数组的代码： http : //www.abdullahyahya.com/2012/06/20/javascript-client-side-form-validation-using-server-side-form-validation/

Answer 1

尝试对php文件执行ajax请求，并从服务器获取响应。 客户端可以通过多种方式完成； 从HTML5标记到纯正则表达式

data = $(this).serializeArray();
//we serialized the data of the form and then we do the ajax request
$.ajax({
    url: 'validate.php',
    type: 'post',
    data: data,
    dataType : 'json',
    success: function (dat) {
        if(dat.error==0){
           //dat.error is my returned error from the php file   
        }else{
           //handle the errors  
        }


            }
        },
        error: function(){
                    //that's if something is wrong with sent data
            alert('failure');
        }
   });