用户
 找回密码
 入住 CI 中国社区
搜索
查看: 2836|回复: 7
收起左侧

[讨论/交流] 折磨了我“一天零一夜”的 CI+JQuery 异步验证问题!

[复制链接]
发表于 2014-11-16 19:28:10 | 显示全部楼层 |阅读模式
情景是这样的:后台添加文章分类,通过 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')?>'
            }
        }
    });
});
复制代码



发表于 2014-11-17 10:51:28 | 显示全部楼层
你这样 JS 和 PHP 混合写,本身就是有问题的。
 楼主| 发表于 2014-11-17 16:13:57 | 显示全部楼层
您是只这样的代码有问题吗?

JS复制代码
            ac_name : {
                required : '<?=lang('article_class_add_name_null')?>',
                remote : '<?=lang('article_class_add_name_exists')?>'
            },
复制代码
发表于 2014-11-17 16:51:04 | 显示全部楼层
pcjingl 发表于 2014-11-17 16:13
您是只这样的代码有问题吗?

是的,不建议这样写。
发表于 2014-11-17 17:09:22 | 显示全部楼层
本帖最后由 Closer 于 2014-11-17 17:37 编辑
Hex 发表于 2014-11-17 16:51
是的,不建议这样写。

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


JS复制代码
 
<script language="javascript">
function Click(){
  alert('<?php echo $id;?>');
}
</script>
 
复制代码
发表于 2014-11-17 18:00:26 | 显示全部楼层
Closer 发表于 2014-11-17 17:09
有甚麼樣的缺點嗎?
我有時也會這樣寫

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

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

 楼主| 发表于 2014-11-17 18:57:45 | 显示全部楼层
Hex 发表于 2014-11-17 18:00
这样写只适合放置全局配置,比如JS用到的一些配置,因为你需要从数据库取出来。

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

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

发表于 2014-11-18 10:02:00 | 显示全部楼层
pcjingl 发表于 2014-11-17 18:57
是这样的,但类似这种表单验证的情况如何解决呢? 特别是在多语言的情况下。

...

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

本版积分规则