折磨了我“一天零一夜”的 CI+JQuery 异步验证问题！

pcjingl

情景是这样的：后台添加文章分类，通过 JQuery validate 验证同名分类是否存在并提示。之前也做过相似的功能，没遇到过什么问题，可这回死活就是不好用。

提示？ 错误？ 一样也没有！同时 remote 可以返回验证值 TRUE OR FALSE ，唯一的一点就是表单无法提交 : $("#article_class_form").submit()

按照这个唯一的线索，先 baidu 后 google, 基本上都是说表单中含有以“submit”命名的 ID,NAME等等...{:soso_e109:}

晚饭后，在线看了一个电影，清醒清醒——还得继续啊！！

换个思路，别把问题纠结在表单提交上了。一步一步检查返回值，包括服务器状态头、缓存，但都没问题。按理说如果验证有错误 errorPlacement 会alert出信息，可什么提示都没有。

JS复制代码

errorPlacement : function(error,element) {
    alert('error');
}

复制代码

既然 errorPlacement 不行， 就用 dataFilter 看看：

JS复制代码

dataFilter: function(data, type) {
    alert(type);
    alert(data);
    alert(typeof data);
}

复制代码

让我们来看看这几项, 第一个输出 text (没问题)， 第二个输出 TRUE (没问题)， 第三个输出 string(没问题)。看来只能手动设置返回值了。

JS复制代码

dataFilter: function(data, type) {
    if (data == "TRUE"){
        return true;
    }else{
        return false;
    }
}

复制代码

奇迹出现了，表单居然可以提交了！  我这个气啊，居然是大小写的问题！！ 二话不说，找到 ajax 方法把 echo 的都改为小写。
终于破案了，恨不得破口大骂几句！

最后把验证代码贴出来吧

JS复制代码

//按钮先执行验证再提交表单
$(function() {
    $("#submitBtn").click(function() {
        if ($("#article_class_form").valid()) {
            $("#article_class_form").submit();
        }
    });
});
 
$(document).ready(function() {
    $('#article_class_form').validate({
        errorPlacement : function(error,element) {
            error.appendTo(element.parent().parent().prev().find('td:first'));
        },
        rules : {
            ac_name : {
                required : true,
                remote : {
                    url : '<?=site_url(APP.'/article_class/ajax/branch/check_class_name')?>',
                    type : 'post',
                    data : {
                        ac_name : function() {
                            return $('#ac_name').val();
                        },
                        ac_parent_id : function() {
                            return $('#ac_parent_id').val();
                        },
                        ac_id : '<?=$class_array['ac_id']?>'
                    }
                    /*dataType: "text",
                    dataFilter: function(data, type) {
                        //alert(typeof data);
                        if (data == "TRUE"){
                            return true;
                        }else{
                            return false;
                        }
                    }*/
                }
            },
            ac_sort : {
                number : true
            }
        },
        messages : {
            ac_name : {
                required : '<?=lang('article_class_add_name_null')?>',
                remote : '<?=lang('article_class_add_name_exists')?>'
            },
            ac_sort : {
                number : '<?=lang('article_class_add_sort_int')?>'
            }
        }
    });
});

复制代码

Hex

你这样 JS 和 PHP 混合写，本身就是有问题的。

pcjingl

您是只这样的代码有问题吗？

JS复制代码

            ac_name : {
                required : '<?=lang('article_class_add_name_null')?>',
                remote : '<?=lang('article_class_add_name_exists')?>'
            },

复制代码

Hex

pcjingl 发表于 2014-11-17 16:13
您是只这样的代码有问题吗？

是的，不建议这样写。

Closer

Hex 发表于 2014-11-17 16:51
是的，不建议这样写。

有甚麼樣的缺點嗎？
我有時也會這樣寫

JS复制代码

 
<script language="javascript">
function Click(){
　　alert('<?php echo $id;?>');
}
</script>
 

复制代码

Hex

Closer 发表于 2014-11-17 17:09
有甚麼樣的缺點嗎？
我有時也會這樣寫

这样写只适合放置全局配置，比如JS用到的一些配置，因为你需要从数据库取出来。

这样的缺点就是，你没办法把这个代码单独提取出来成为 .js 文件，也就没法压缩了。

pcjingl

Hex 发表于 2014-11-17 18:00
这样写只适合放置全局配置，比如JS用到的一些配置，因为你需要从数据库取出来。

这样的缺点就是，你没办 ...

是这样的，但类似这种表单验证的情况如何解决呢？ 特别是在多语言的情况下。

Hex

pcjingl 发表于 2014-11-17 18:57
是这样的，但类似这种表单验证的情况如何解决呢？ 特别是在多语言的情况下。

...

这个就是具体问题具体分析了，比如可以用 JS 来拼装 URL，PHP只在系统初始化的时候配置一些全局配置。
比如你也可以使用模板生成，或者用框架来保证不需要PHP和JS混合编写。
方法是很多的。