如何使用服务器验证&使用jQuery Tools进行客户端验证?

时间:2013-07-01 00:54:41

标签: php jquery forms validation jquery-tools

好的,所以我在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客户端&amp;此表单上的服务器验证。

我试过了:

$(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 Tools Validation正常方式显示此错误消息数组。但我没有运气。

我接近这个权利吗?如果是这样,我做错了什么?我不确定这是导致问题的Javascript,还是我在逻辑上接近这个问题。我几乎找不到解释如何成功使用PHP的JQuery Tools验证的资源。

目前,数组只显示在屏幕上,就像回显文字一样。

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

1 个答案:

答案 0 :(得分:0)

尝试对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');
        }
   });