API tools faq
paste
Advertisement
Guest User

jquery validation on cleditor inputs

a guest
Jul 8th, 2013
291
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 9.51 KB | None | 0 0
raw download clone embed print report
  1. <html>
  2. <head>
  3.  
  4. // Include all the jquery, jquery ui, cleditor, and validation-engine CSS and javascript library files here
  5.  
  6.  
  7. <script type="text/javascript">
  8.  
  9. // object used to store the validation states of any html editor textarea inputs used on the page
  10. var editorStates = new Object();
  11.  
  12. // add one property/value for each textarea id that you are using on this page..
  13. // in this example there are going to be three diferent editor inputs:
  14. editorStates['your_textarea_id_1']=true;
  15. editorStates['your_textarea_id_2']=true;
  16. editorStates['your_textarea_id_etc']=true;
  17.  
  18.  
  19. $(document).ready(function(){
  20.  
  21.  
  22. // ==========================================================================
  23. // initialize the cleditor object(s) for the textarea(s) used on this page...
  24. // ==========================================================================
  25.  
  26. // initialize the 'your_textarea_id_1' textarea and store the cleditor object in the 'your_textarea_id_1_editor' variable...
  27. var your_textarea_id_1_editor = $("#your_textarea_id_1").cleditor({
  28. width: 650, // width not including margins, borders or padding
  29. height: 220, // height not including margins, borders or padding
  30. controls: // controls to add to the toolbar
  31. "bold italic underline | font size " +
  32. "style | color highlight removeformat | bullets numbering | outdent " +
  33. "indent | alignleft center alignright justify | pastetext source",
  34. }).change(function (){
  35. if(editorStates['your_textarea_id_1']==false){ // input has been validated as false so need to check it as user types so the flag goes away when appropriate...
  36. valid_editor_text('your_textarea_id_1'); // re-validate this input
  37. };
  38. });
  39.  
  40. // initialize the 'your_textarea_id_2' textarea and store the cleditor object in the 'your_textarea_id_2_editor' variable...
  41. var your_textarea_id_2_editor = $("#your_textarea_id_2").cleditor({
  42. width: 650, // width not including margins, borders or padding
  43. height: 220, // height not including margins, borders or padding
  44. controls: // controls to add to the toolbar
  45. "bold italic underline | font size " +
  46. "style | color highlight removeformat | bullets numbering | outdent " +
  47. "indent | alignleft center alignright justify | pastetext source",
  48. }).change(function (){
  49. if(editorStates['your_textarea_id_2']==false){ // input has been validated as false so need to check it as user types so the flag goes away when appropriate...
  50. valid_editor_text('your_textarea_id_2'); // re-validate this input
  51. };
  52. });
  53.  
  54. // initialize the 'your_textarea_id_etc' textarea and store the cleditor object in the 'your_textarea_id_etc_editor' variable...
  55. var your_textarea_id_etc_editor = $("#your_textarea_id_etc").cleditor({
  56. width: 650, // width not including margins, borders or padding
  57. height: 220, // height not including margins, borders or padding
  58. controls: // controls to add to the toolbar
  59. "bold italic underline | font size " +
  60. "style | color highlight removeformat | bullets numbering | outdent " +
  61. "indent | alignleft center alignright justify | pastetext source",
  62. }).change(function (){
  63. if(editorStates['your_textarea_id_etc']==false){ // input has been validated as false so need to check it as user types so the flag goes away when appropriate...
  64. valid_editor_text('your_textarea_id_etc'); // re-validate this input
  65. };
  66. });
  67.  
  68. // ==========================================================================
  69. // initialize the jquery validation-engine
  70. // ==========================================================================
  71.  
  72. // Note: 'mainform' is the id value of the form element that contains the three textarea inputs
  73. // Replace this with the id value of YOUR form id!
  74. jQuery("#mainform").validationEngine('attach', {
  75. onValidationComplete: function(form, status){
  76.  
  77. // Note: 'status' will already be true/false based on the validation results of any other inputs that you
  78. // are validating using the typical validation methods provided by the validationEngine plugin.
  79.  
  80. // Now we need to validate the textarea (cleditor html editor) inputs...
  81.  
  82. // validate the 'your_textarea_id_1' textarea input
  83. if( your_textarea_id_1_editor[0].sourceMode() == false ){
  84. // in editor mode, need to update the hidden textarea input
  85. your_textarea_id_1_editor[0].updateTextArea();
  86. }
  87. if(! valid_editor_text('your_textarea_id_1') ){ // <-- pass the textarea id value to the 'valid_editor_text' function
  88. // The validation on this input failed...
  89. status=false; // prevent the form from submitting
  90. }
  91.  
  92. // validate the 'your_textarea_id_2' textarea input
  93. if( your_textarea_id_2_editor[0].sourceMode() == false ){
  94. // in editor mode, need to update the hidden textarea input
  95. your_textarea_id_2_editor[0].updateTextArea();
  96. }
  97. if(! valid_editor_text('your_textarea_id_2') ){ // <-- pass the textarea id value to the 'valid_editor_text' function
  98. // The validation on this input failed...
  99. status=false; // prevent the form from submitting
  100. }
  101.  
  102. // validate the 'your_textarea_id_etc' textarea input
  103. if( your_textarea_id_etc_editor[0].sourceMode() == false ){
  104. // in editor mode, need to update the hidden textarea input
  105. your_textarea_id_etc_editor[0].updateTextArea();
  106. }
  107. if(! valid_editor_text('your_textarea_id_etc') ){ // <-- pass the textarea id value to the 'valid_editor_text' function
  108. // The validation on this input failed...
  109. status=false; // prevent the form from submitting
  110. }
  111.  
  112.  
  113. // submit if there are no validation errors
  114. if(status == true){
  115. form.validationEngine('detach'); // prevents an endless loop
  116. form.submit(); // form is valid, now submit it
  117. }
  118.  
  119.  
  120. }
  121. });
  122.  
  123.  
  124. }); // end doc ready
  125.  
  126.  
  127. // ============================================================================
  128. // The 'valid_editor_text' function
  129. // This function does the actual validation of the textarea (html editor) input
  130. // ============================================================================
  131. function valid_editor_text(inputID){
  132.  
  133.  
  134. str = $('#'+inputID).val();
  135.  
  136. // Note: str contains the value of the textarea input so do whatever validations you need
  137. // against that. Return true if it's valid or false if it isn't.
  138.  
  139.  
  140. // Right now I am just checking to make sure that the user entered anything at all ...
  141.  
  142. // remove any <br>, <br />, &nbsp;, {spaces}, and/or {newlines} from the beginning of the string
  143. // just to make sure the user typed some actual text instead of random spaces and enter keys (aka nothing)
  144. str = str.replace(/^(?:<[Bb][Rr](?: \/)?>|\&[Nn][Bb][Ss][Pp];|\n| )+/g,'');
  145. if(str.length > 0){
  146. console.log("valid_editor_text('"+inputID+"')"+' returning true');
  147. editorStates[inputID]=true;
  148. // hide any previous prompts on this input
  149. $('#'+inputID+'_prompt_location').validationEngine('hide');
  150. return true;
  151. }else{
  152. console.log("valid_editor_text('"+inputID+"')"+' returning false');
  153. editorStates[inputID]=false;
  154. // need to display the validation message for this input
  155. $('#'+inputID+'_prompt_location').validationEngine('showPrompt', 'This field is required.', 'required', 'topRight', true);
  156. return false;
  157. }
  158. }
  159.  
  160. </script>
  161.  
  162.  
  163. </head>
  164. <body>
  165.  
  166.  
  167. <form action="youraction.goes.here" method="post" name="mainform" id="mainform">
  168.  
  169.  
  170. <!-- Add a placeholder div that is used to target the position of a validation message if the validation fails
  171. The id value is the value of your textarea id with '_prompt_location' appended, like so.. -->
  172. <div>
  173. <div id="your_textarea_id_1_prompt_location"></div>
  174.  
  175. <!-- Finally, the textarea input that is causing all this fuss .. -->
  176. <textarea id="your_textarea_id_1" name="your_textarea_id_1"></textarea>
  177. </div>
  178.  
  179. <!-- repeat for the other textareas you are using .. -->
  180. <div>
  181. <div id="your_textarea_id_2_prompt_location"></div>
  182. <textarea id="your_textarea_id_2" name="your_textarea_id_2"></textarea>
  183. </div>
  184.  
  185. <div>
  186. <div id="your_textarea_id_etc_prompt_location"></div>
  187. <textarea id="your_textarea_id_etc" name="your_textarea_id_etc"></textarea>
  188. </div>
  189.  
  190.  
  191.  
  192. <p>Here is a standard text input to demo how typical validation works along with our custom ..<br />
  193. <input type="text" name="a_standard_input" id="a_standard_input" value="" class="validate[required]" />
  194. </p>
  195.  
  196. <p>
  197. <input type="submit" name="b1" value="Submit this form!" />
  198. <!-- Note: the validation occurs when the form is submitted via submit button or javascript (not shown) -->
  199. </p>
  200.  
  201. </form>
  202.  
  203. </body>
  204. </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!