API tools faq
paste
Advertisement
JPHellemons

jQuery validation with TinyMce

JPHellemons
Apr 13th, 2012
2,521
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 4.63 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
  5. <title>jQuery validation plug-in - main demo</title>
  6. <link rel="stylesheet" type="text/css" media="screen" href="http://www.zinomen.com/test/css/screen.css" />
  7. <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
  8. <script type="text/javascript" src="http://jzaefferer.github.com/jquery-validation/jquery.validate.js"></script>
  9. <script type="text/javascript" src="http://www.tinymce.com/js/tinymce/jscripts/tiny_mce/jquery.tinymce.js"></script>
  10. <script type="text/javascript" src="http://www.zinomen.com/test/tiny_mce/tiny_mce.js"></script>
  11. <script type="text/javascript">
  12. $(document).ready(function() {
  13.     $('#message').tinymce({
  14.         // Location of TinyMCE script
  15.         script_url : 'http://www.zinomen.com/test/tiny_mce/tiny_mce.js',
  16.  
  17.         // General options
  18.         theme : "advanced",
  19.         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",
  20.  
  21.         // Theme options
  22.         theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect",
  23.         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",
  24.         theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
  25.         theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak",
  26.         theme_advanced_toolbar_location : "top",
  27.         theme_advanced_toolbar_align : "left",
  28.         theme_advanced_statusbar_location : "bottom",
  29.         theme_advanced_resizing : true,
  30.  
  31.         // Example content CSS (should be your site CSS)
  32.         content_css : "css/content.css",
  33.  
  34.         // Drop lists for link/image/media/template dialogs
  35.         template_external_list_url : "lists/template_list.js",
  36.         external_link_list_url : "lists/link_list.js",
  37.         external_image_list_url : "lists/image_list.js",
  38.         media_external_list_url : "lists/media_list.js",
  39.     });
  40.  
  41.     $.validator.addMethod("textInMce", function textInMce(value, element){
  42.         return $('#message').text().length > 15 && $('#tinymce').text().length > 15;
  43.     }, "Please use more then 15 chars.");
  44.  
  45.     var container = $('div.error');
  46.      
  47.     $("#signupForm").validate({
  48.         errorContainer: container,
  49.         errorLabelContainer: $("ul", container),
  50.         ignore: "",
  51.         wrapper: 'li',
  52.         rules: {
  53.             firstname: {
  54.                 required: true,
  55.                 minlength: 2
  56.             },
  57.             lastname: {
  58.                 required: true,
  59.                 minlength: 2
  60.             }
  61.         },
  62.         messages: {
  63.             firstname: {
  64.                 required: "Please fill in your firstname",
  65.                 minlength: "Your firstname must consist of at least 2 characters"
  66.             },
  67.             lastname: {
  68.                 required: "Please fill in your lastname",
  69.                 minlength: "Your lastname must consist of at least 2 characters"
  70.             }
  71.         }
  72.     });
  73.  
  74.     $('input.submit').click(function(){
  75.         if ($("#signupForm").valid())
  76.             alert('succes');
  77.         else
  78.             alert($('#message').text().length);
  79.     });
  80.  
  81. });
  82.    
  83.  
  84. </script>
  85. <style type="text/css">
  86.     #signupForm { width: 670px; }
  87.     #signupForm label.error {
  88.         margin-left: 10px;
  89.         width: auto;
  90.         display: inline;
  91.     }
  92. </style>
  93.  
  94. </head>
  95. <body>
  96.  
  97. <div id="main">
  98. <div class="error" style="display: none;">
  99.     <h2>Something goes wrong!</h2>
  100.     <ul>
  101.         <li><label for="firstname" class="error">Please fill in your firstname</label></li>
  102.         <li><label for="lastname" class="error">Please fill in your lastname</label></li>
  103.     </ul>
  104. </div>
  105. <form class="cmxform" id="signupForm" method="post" action="#">
  106.     <fieldset>
  107.         <legend>Validating a complete form</legend>
  108.         <p>
  109.             <label for="firstname">Firstname</label>
  110.             <input id="firstname" name="firstname" type="text" />
  111.         </p>
  112.         <p>
  113.             <label for="lastname">Lastname</label>
  114.             <input id="lastname" name="lastname" type="text" />
  115.         </p>
  116.         <p>
  117.             <label for="message">Message</label>
  118.             <textarea id="message" name="message" rows="20" cols="20" class="textInMce"></textarea>
  119.         </p>
  120.         <p>
  121.             <input class="submit" type="submit" value="Submit"/>
  122.         </p>
  123.     </fieldset>
  124. </form>
  125. </div>
  126. </body>
  127. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!