jQuery validate 无法校验 kindeditor 非空

  • 出现情况

使用jQuery validate 校验表单的时候,如果给textarea绑定富文本,就会使得textarea无法校验。

插件版本:

kindeditor 4.1.11

jquery 1.11.1

jquery.validate  1.15.0



<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>hello</title>

</head>
<body>
<form id="addForm" action="/web/article/add_article.htm" method="post" enctype="multipart/form-data">
文章内容:<textarea id="content" name="content" ></textarea><br/><br/>
<input type="button" id="addArticle" value="提交"><br/><br/><br/>
        </form>
<script type="text/javascript" src="/kindeditor/kindeditor-all.js"></script>
    <script type="text/javascript" src="/kindeditor/lang/zh-CN.js"></script>
<script type="text/javascript" src="/js/jquery.js" ></script>
<script type="text/javascript" src="/js/jquery.validate.js" ></script>
<script type="text/javascript" src="/js/additional-methods.js" ></script>
    <script type="text/javascript">
           
KindEditor.ready(function(K) {
                    window.editor = K.create('#content',{
    uploadJson : "/kindeditor/jsp/upload_json.jsp",
    fileManagerJson : "/kindeditor/jsp/file_manager_json.jsp",
                    allowFileManager : true,
afterBlur : function(){this.sync();}
    });
            });

$("#addForm").validate({
            rules:{
content:{required:true}
        },messages:{
content:{required:"请编辑文章内容"},
        },errorPlacement:function(error, element){
        error.insertAfter(element.next());
        }
       
        });

$("#addArticle").click(function(){
if($("#addForm").valid() == true){
$("#addForm").submit();
}
});
    </script>
</body>
</html>


上面的代码,富文本内不输入任何东西,点击“提交”。发现表单会直接提交,校验无效。

  • 不执行校验 原因及解决方法


原因:

调试页面可以发现,创建富文本输入框后,原先的textarea被隐藏。

然而通过可以validate的源码可以看到,validate不会校验隐藏的属性。



解决方法(两种方法):

1、把validate源码中【ignore: ":hidden"】修改为【ignore: ""】

2、在页面的js中添加【$.extend($.validator.defaults,{ignore:""});】

  • 校验不通过 原因及解决方法

根据上面的方法修改后,打开页面,富文本中不输入任何东西,点击“提交”按钮,富文本后面显示了“ 请编辑文章内容”的提示。但是再在富文本中输入内容后,表单无法提交。

原因:调试页面发现content的内容为空,说明富文本中的值并未赋值给content。



解决方法:

失去焦点的时候,将富文本的值同步给content。


评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值