jQuery验证与CKEditor的

集成我有一个text-areajQuery验证与CKEditor的

<td><textarea id="event-body" name="body"> 
<p class="error"></p>

即与CKEDITOR

CKEDITOR.replace("event-body")

和jQuery验证plugin集成。和代码是这样

$('#event').validate({ 
    rules:{ 
     name:{ 
      required: true 
     }, 
    }, 
    messages:{ 
     body:{ 
      required: "event body is required" 
     } 
    }, 
    errorPlacement: function(error, element){ 
     $(element).each(function(){ 
      $(this).parent('td').find('p.error').html(error); 
     }) 
    });

代码工作得很好，但是当我键入我的textarea元素，我还是直到我点击它两次收到错误消息。即我必须提交两次我的页面，以便即使textarea不为空也不会出现错误消息。

没有一种方法可以顺利进行验证（无需点击两次）。

来源

2011-02-26 Santosh Linkha

看看here

基本上你需要运行验证之前调用

CKEDITOR.instances.editor1.updateElement();

。

只需用您的textarea的名称替换editor1即可。

然后调用

$(myformelement).validate();

编辑

$("#my-form-submit-button").click(function(e){ 
    e.preventDefault(); 
    CKEDITOR.instances.event-body.updateElement(); 
    $('#event').validate({ 
      ...options as above.. 
    });o 
})

来源

2011-02-26 12:18:36

我该在哪里运行此代码。看看我的验证功能 – 2011-02-26 12:26:57

不适合我。我已经将该字段设置为必填字段，但表单提交时未填写。 – 2016-05-23 06:30:42

将这个在提交按钮鼠标按下（）事件：

$("#submit").mousedown(function(){ 
    for (var i in CKEDITOR.instances){ 
    CKEDITOR.instances[i].updateElement(); 
    } 
});

来源

2011-08-11 06:48:44 user620967

使用这个在你的JavaScript，你要验证你的形成。它会更新你的ckeditor，并将ckeditor的值分配给你整合的textarea。

它应该运行形式之前提交：

CKEDITOR.instances.editor1.updateElement();

来源

2011-10-12 14:27:27

jQuery的验证只验证可见，但CKEDITOR使得隐藏防止它被验证textarea的输入字段。

来源

2011-11-22 02:23:40 killebytes

这是否通过验证？我尝试了所有上述建议，但仍然无法实现。我知道我的验证代码很好，因为它没有CKEditor效果很好。我写了手动验证，所以我知道textareas在我调用CKEDITOR.instance.updateElement（）方法时得到更新。但是当我用jQuery验证和CKEditor提交表单时，验证根本不会触发。 – RaeLehman 2012-04-20 17:43:51

您在CKEDITOR中看到的textarea与您在HTML中定义的textarea不同。 CKEDITOR用它自己的编辑器替换它，从而隐藏你定义的正常textarea。 – killebytes 2012-04-22 14:59:39

如果要连接它像

$("#Detail").ckeditor(config);

比你将需要使用像这样

var editor = $('#Detail').ckeditorGet(); 
editor.updateElement();

我用这个例子功能提交我的形式，在这种情况下

function SubmitEvent(){ 
    var editor = $('#Detail').ckeditorGet(); 
    editor.updateElement(); 
    if($("#EventForm").valid()) { 
     $('#EventForm').submit(); 
    } 
}

来源

2012-06-27 23:28:03

如果你使用SPRY，这是我的工作....

<script> 
$(document).ready(function() { 

    CKEDITOR.instances["editor1"].on("instanceReady", function() { 

     //set keyup event 
     this.document.on("keyup", function() { CKEDITOR.instances["editor1"].updateElement(); }); 
     //and paste event 
     this.document.on("paste", function() { CKEDITOR.instances["editor1"].updateElement(); }); 
     //and cut event 
     this.document.on("cut", function() { CKEDITOR.instances["editor1"].updateElement(); }); 

    }); 

    CKEDITOR.instances["editor2"].on("instanceReady", function() { 

     //set keyup event 
     this.document.on("keyup", function() { CKEDITOR.instances["editor2"].updateElement(); }); 
     //and paste event 
     this.document.on("paste", function() { CKEDITOR.instances["editor2"].updateElement(); }); 
     //and cut event 
     this.document.on("cut", function() { CKEDITOR.instances["editor2"].updateElement(); }); 

    }); 

    CKEDITOR.instances["editor3"].on("instanceReady", function() { 

     //set keyup event 
     this.document.on("keyup", function() { CKEDITOR.instances["editor3"].updateElement(); }); 
     //and paste event 
     this.document.on("paste", function() { CKEDITOR.instances["editor3"].updateElement(); }); 
     //and cut event 
     this.document.on("cut", function() { CKEDITOR.instances["editor3"].updateElement(); }); 

    }); 

}); 
</script>

来源

2013-05-21 23:47:34 vinylDeveloper

我宁愿更新blur事件上的每个实例，因此您不需要更改提交函数上的任何内容！:)

$('#myInstance').ckeditor({toolbar:'MyToolbar'}); 
CKEDITOR.instances.myInstance.on('blur', function(e){ 
    CKEDITOR.instances.myInstance.updateElement(); 
});

来源

2013-07-11 13:41:25

我已经结合了你的sugestions，并使这个小作弊，没有问题的作品。

我的代码：

<form id="create-message-form-3" class="form-horizontal" role="form" accept-charset="utf-8"> 
       <div class="title"><h1>Add Content:</h1></div> 
       <div class="col col-12"> 
        <textarea class="form-control ckeditor" name="templateeditor" id="templateeditor" rows="6"></textarea> 
        <p class="error"></p> 
       </div> 



       <div class="text-center"> 
        <a class="btn btn-success pull-left" href="create-message-2.php">Back</a> 
        <input class="btn btn-default" type="button" value="Save"> 
        <input id="submit-templateeditor" class="btn btn-success pull-right" type="submit" value="Next Step"> 
       </div> 
      </form>

在我的.css文件，我强迫我的是这样的：

textarea.ckeditor { 
visibility: visible !important; 
display: block !important; 
height: 0px !important; 
border: none !important; 
resize:none; 
overflow: hidden; }

而我的.js验证是正常的格式：

$("#submit-templateeditor").click(function(){ 
    CKEDITOR.instances.templateeditor.updateElement(); 
    $("#create-message-form-3").validate({ 
     rules: { 
      templateeditor: "required" 
     }, 
     messages: { 
      templateeditor: "Please add some code before continue" 
     }, 
     errorPlacement: function(error, element){ 
      $(element).each(function(){ 
       $(this).parent('div').find('p.error').html(error); 
      }); 
     } 
    }); 
});

来源

2014-05-16 18:53:14

感谢您的回答！这个问题是3岁，虽然你找到了解决问题的办法很好，但问题已经解决了，把这个帖子带回活动没有任何作用。在将来，请不要带回长期死的帖子:) – secretformula 2014-05-16 19:09:56

jQuery .validate（）函数提供“onsubmit”选项以在验证之前执行自定义操作。默认情况下，它被设置为true。我已经在我的项目中使用它，它工作得很好。

 $(".selector").validate({ 
      onsubmit: function(){ 
        CKEditorUpdate(); 
        return true; 
       }, 
       rules:{ 
        title:{required:true}, 
        content:{required:true} 
       }, 
       messages:{ 
        title:{required:"Please enter a title"}, 
        content:{required:"Please enter some content"} 
       }, 
       submitHandler : function(form){ 
     }); 

    function CKEditorUpdate() { 
     for (instance in CKEDITOR.instances) 
      CKEDITOR.instances[instance].updateElement(); 
    }

这是一个更清洁，更容易理解的方法。请参阅http://jqueryvalidation.org/validate#onsubmit

来源

2015-04-14 08:04:02

jQuery验证与CKEditor的

回答

相关问题