带有TinyMCE字段的Jqueryvalidation表单，它没有空值给出错误

我在TinyMCE编辑器中有以下jQuery Validation脚本： http ：//www.zinomen.com/test/validate.html

通过firstname和lastname，当字段为空时，您会收到错误，但在消息字段中，您不会收到任何错误。

我使用以下代码：

 $.validator.setDefaults({ submitHandler: function() { alert('submitted, value of message = '+ tinyMCE.get('message').getContent()); } }); $(document).ready(function() { // validate signup form on keyup and submit $("#signupForm").validate({ rules: { firstname: { required: true, minlength: 2 }, lastname: { required: true, minlength: 2 }, message: { required: true, minlength: 15 } }, messages: { firstname: { required: "Please fill in your firstname", minlength: "Your firstname must consist of at least 2 characters" }, lastname: { required: "Please fill in your lastname", minlength: "Your lastname must consist of at least 2 characters" }, message: { required: "Please fill in your message", minlength: "Your message must consist of at least 15 characters" } } }); });  

你得到的tinyMCE字段的值： tinyMCE.get('message').getContent(); 并以您的forms

任何人都可以帮助我，通过空消息字段获取jqueryvalidation错误吗？

Answer 1

工作jsFiddle： http ： //jsfiddle.net/jNJ2G/1/

我使用了TinyMCE jQuery插件并为jqueryvalidation创建了一个自定义规则

 $('#message').tinymce({ // Location of TinyMCE script script_url : 'http://www.zinomen.com/test/tiny_mce/tiny_mce.js', // General options theme : "advanced", plugins : "pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template", // Theme options theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect", theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor", theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen", theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak", theme_advanced_toolbar_location : "top", theme_advanced_toolbar_align : "left", theme_advanced_statusbar_location : "bottom", theme_advanced_resizing : true, // Example content CSS (should be your site CSS) content_css : "css/content.css", // Drop lists for link/image/media/template dialogs template_external_list_url : "lists/template_list.js", external_link_list_url : "lists/link_list.js", external_image_list_url : "lists/image_list.js", media_external_list_url : "lists/media_list.js", }); $.validator.addMethod("textInMce", function textInMce(value, element){ return $('#message').html().length > 15; }, "Please over 15 chars."); $.validator.classRuleSettings.textInMce= { textInMce: true }; $("#signupForm").validate({ rules: { firstname: { required: true, minlength: 2 }, lastname: { required: true, minlength: 2 } }, messages: { firstname: { required: "Please fill in your firstname", minlength: "Your firstname must consist of at least 2 characters" }, lastname: { required: "Please fill in your lastname", minlength: "Your lastname must consist of at least 2 characters" } } }); if ($("#signupForm").valid()) alert('succes'); 

现在编辑这个有效的pastebin样本:) http://pastebin.com/cDJ9033C

Answer 2

您的代码不起作用，因为$("#signupForm")引用的表单不​​包含编辑器，而是编辑器源html lement – 您的textarea。 Tinymce使用像textarea这样的html元素来获取和编写编辑器内容，但是像大多数rte编辑器一样创建一个可信的iframe来编辑内容。

validation不起作用因为你的textarea上没有keyup事件 – 这些事件在编辑器iframe中被触发（我想如果点击提交按钮（？），validation将起作用）。

为了使你的代码工作，你必须在keyup上写回编辑器内容并在表单元素上触发/触发keyup事件（这可能不适用于某些IE浏览器）。

您可以使用tinymce设置配置参数执行此操作。 以下是在您的tinymce init函数（配置）中编写的内容的示例：

 theme : "advanced", plugins: "style, paste, wordcount", ... setup : function(ed){ ed.onKeyUp.add(function (ed, event) { tinymce.triggerSave(); $("#signupForm#message").trigger({type: 'keyup', ctrlKey: event.ctrlKey, altKey: event.altKey, which: event.keyCode, event:eventObject }); }); }, ...