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

【问题标题】：How to use server validation & client-side validation with jQuery Tools?如何通过 jQuery 工具使用服务器验证和客户端验证？
【发布时间】：2013-07-01 00:54:41
【问题描述】：

好的，所以我在 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>

这是使用带有 class="profile_popups_form" 的 <a> 和以下 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/

【问题讨论】：

标签： php jquery forms validation jquery-tools

【解决方案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');
        }
   });

【讨论】：