ugrás a tartalomhoz

Textarea validate

cszlak · 2014. Aug. 16. (Szo), 07.59
Sziasztok

Olyan problémám lenne, hogy összeraktam egy bootstrapValidator -t.
Minden működik is benne, kivéve a textarea.
A leírásában megtaláltam, hogy a ckeditor 4.4.2-vel kompatibilis.

A probléma az, hogy egy oldalon több textarea van, és külön külön működtetni kéne.
Azt szeretném elérni, hogy nem csak a bevitt szöveg méretét, hanem a karaktereket is figyelné.

Teljes kód: (css: bootstrap alap )

<!DOCTYPE html>    
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2014 - Dark </title>   
    <link rel="stylesheet" type="text/css" href="css/bootstrapValidator.css">
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="css/local.css" />
    <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
  <script type="text/javascript" src="js/bootstrap.min.js"></script>
  <script type="text/javascript" src="js/bootstrapValidator.js"></script>
   <script src="ckeditor4.4.3/ckeditor.js"></script>
  <script src="ckeditor4.4.3/adapters/jquery.js"></script> 
</head><body>
    <div id="wrapper">
          <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="index.html">Panel</a>
            </div>
            <div class="collapse navbar-collapse navbar-ex1-collapse">
                <ul id="active" class="nav navbar-nav side-nav">
                    <li class="selected"><a href="index.html"><i class="fa fa-bullseye"></i> Dashboard</a></li>
                    <li>
                        <a href="javascript:;" data-toggle="collapse" data-target="#demo"><i class="fa fa-fw fa-arrows-v"></i> Dropdown <i class="fa fa-fw fa-caret-down"></i></a>
                        <ul id="demo" class="collapse">
                            <li>
                                <a href="#">Dropdown Item</a>
                            </li>
                            <li>
                                <a href="#">Dropdown Item</a>
                            </li>
                        </ul>
                    </li>
                    
                   <!-- <li><a href="portfolio.html"><i class="fa fa-tasks"></i> Portfolio</a></li>
                    <li><a href="blog.html"><i class="fa fa-globe"></i> Blog</a></li>
                    <li><a href="signup.html"><i class="fa fa-list-ol"></i> SignUp</a></li>
                    <li><a href="register.html"><i class="fa fa-font"></i> Register</a></li>
                    <li><a href="timeline.html"><i class="fa fa-font"></i> Timeline</a></li>-->
                    <li><a href="forms.html"><i class="fa fa-list-ol"></i> Forms</a></li> 
                    <li><a href="typography.html"><i class="fa fa-font"></i> Typography</a></li>
                    <li><a href="bootstrap-elements.html"><i class="fa fa-list-ul"></i> Bootstrap Elements</a></li>
                    <li><a href="bootstrap-grid.html"><i class="fa fa-table"></i> Bootstrap Grid</a></li>         
                  
                </ul>

                <ul class="nav navbar-nav navbar-right navbar-user">
                    <li class="dropdown messages-dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-envelope"></i> Messages <span class="badge">2</span> <b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li class="dropdown-header">2 New Messages</li>
                            <li class="message-preview">
                                <a href="#">
                                    <span class="avatar"><i class="fa fa-bell"></i></span>
                                    <span class="message">Security alert</span>
                                </a>
                            </li>
                            <li class="divider"></li>
                            <li class="message-preview">
                                <a href="#">
                                    <span class="avatar"><i class="fa fa-bell"></i></span>
                                    <span class="message">Security alert</span>
                                </a>
                            </li>
                            <li class="divider"></li>
                            <li><a href="#">Go to Inbox <span class="badge">2</span></a></li>
                        </ul>
                    </li>
                    <li class="dropdown user-dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-user"></i> Steve Miller<b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li><a href="#"><i class="fa fa-user"></i> Profile</a></li>
                            <li><a href="#"><i class="fa fa-gear"></i> Settings</a></li>
                            <li class="divider"></li>
                            <li><a href="#"><i class="fa fa-power-off"></i> Log Out</a></li>

                        </ul>
                    </li>
                    <li class="divider-vertical"></li>
                    <li>
                        <form class="navbar-search">
                            <input type="text" placeholder="Search" class="form-control">
                        </form>
                    </li>
                </ul>
            </div>
        </nav>
     <div id="page-wrapper">
            <div class="row">
    <div class="bs-example">
            <div class="alert alert-dismissable alert-success" id="uzenet">
              <button type="button" class="close" data-dismiss="alert" >&times;</button>
              <p>Please, click on Save button before you leave this page, otherwise the changes will be lost.!!!!</p>
            </div>
           </div>
	 <div class="col-lg-12 text-center">
	<div class="panel panel-primary">
              <div class="panel-heading">
                <h3 class="panel-title">Text</h3>
              </div>
              <div class="panel-body">
              
               <div id="loading-img1"></div> 
<form action="button.php" method="post" enctype="multipart/form-data"  role="form" id="TextForm">
        <input name="language_list" type="hidden" value="en,hu,ge" class="form-control"/>
          <div class="col-lg-6">
            <!-- --------- Headline --------------------------------------------- -->    
      <div class="form-group col-lg-12">
      <label>Headline en</label> 
   <input name="headline_en" 
   id="headline_text"
     type="text" class="form-control"   
     title="Text of Hungarian header"       
     value="tesztrfgfok123" />
        </div>        
       <!-- --------- Textarea --------------id="text"------------------------------- -->
  <div class="form-group col-lg-12">
     <label>Text</label>    
       <textarea name="bigtext_en" class="ckeditor"   >Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
       </textarea> 
     
	</div>
 
      <!-- --------- Headline --------------------------------------------- -->    
      <div class="form-group col-lg-12">
      <label>Headline hu</label> 
   <input name="headline_hu" 
   id="headline_text"
     type="text" class="form-control"   
     title="Text of Hungarian header"       
     value="teszt" />
        </div>
       
       <!-- --------- Textarea --------------id="text"------------------------------- -->
  <div class="form-group col-lg-12">
     <label>Text</label>    
       <textarea name="bigtext_hu" class="ckeditor"   >Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.      </textarea> 
     
	</div>
 
      <!-- --------- Headline --------------------------------------------- -->    
      <div class="form-group col-lg-12">
      <label>Headline ge</label> 
   <input name="headline_ge" 
   id="headline_text"
     type="text" class="form-control"   
     title="Text of Hungarian header"       
     value="teszt" />
        </div>
         
       <!-- --------- Textarea --------------id="text"------------------------------- -->
  <div class="form-group col-lg-12">
     <label>Text</label>    
       <textarea name="bigtext_ge" class="ckeditor"   > Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.       </textarea>        
	</div>
 <!-- --------- Sumbit --------------------------------------------- -->
         <div class="form-group col-lg-12">
    <button type="submit" class="btn btn-default" id="submit_btn1" name="text_modify_submit">Save</button> 
       
       <input type="hidden" name="text_modify_submit"   
    value="Save">    
       
         <button type="reset" class="btn btn-default">Reset Button</button> 
         </div>
          
         </div>  

        <!-- --------- Image --------------------------------------------- -->

	   <div class="col-lg-6">
       
        <div class="form-group col-lg-12">
                <img src="http://127.0.0.1/Galeria/portfolio_img7.png"  align="center" title="title|title|title"    
       class="thumbnail img-responsive"
       />
     <!-- width="" -->  
       
     <label>http://127.0.0.1/Galeria/portfolio_img7.png</label>          </div> 
       
          <!-- --------- File Upload --------------------------------------------- -->
          <div class="form-group col-lg-12">
         <label>File Upload  :</label>    
     <input type="file" type="file" name="files"  accept="image" />
     </div>
       
       <!-- ---------- Width / Height ---------------------------------------- -->
       <div class="form-group col-lg-4">
     <label>Width:</label>
     <input name="image_width" type="text" class="form-control" 
              value="305"  title="Width"  />
         </div>    
          <div class="form-group col-lg-4">
         
      <label>Height:</label>    
         <input name="image_height" type="text" class="form-control"
         value="176"
		  title="Height"  /> 
        </div>      
           
       <!-- --------- Title --------------------------------------------- -->
          <div class="form-group col-lg-12">
      <label>Text</label>
     <input name="image_title_en" type="text" class="form-control" 
	    value="title" /> 
         </div>      
               <div class="form-group col-lg-12">
      <label>Text</label>
     <input name="image_title_hu" type="text" class="form-control" 
	    value="title" /> 
         </div>      
               <div class="form-group col-lg-12">
      <label>Text</label>
     <input name="image_title_ge" type="text" class="form-control" 
	    value="title" /> 
         </div>  
          <!-- --------- Sumbit --------------------------------------------- -->
          <div class="form-group col-lg-12">
      <button type="submit" class="btn btn-default" id="submit_btn2" name="text_modify_submit">Save</button>
         <button type="reset" class="btn btn-default">Reset Button</button>  
          <input name="id_image" type="hidden" value="0" />        
        <input name="url_image" type="hidden"   
		value="Galeriaportfolio_img7.png"  /> 
         <input name="site" type="hidden" 
         value="about_us" /> 
      <input name="site_position" type="hidden" value="1" />   
          </div>   
      </div>         
</form>	    
         </div>
            </div>                     	
</div> </div> </div>
<script>
$(document).ready(function() {
	 $('#TextForm').bootstrapValidator({		
	   
//        live: 'disabled',
        message: 'This value is not valid',
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
     fields: { 
		headline_en:{
                validators: {
                    notEmpty: {
                        message: 'The headline_en is required and cannot be empty'
                    },
					 regexp: {
                      regexp:  /^([^|;{}])+$/,				 						
                      message: 'The headline_en  can only consist of alphabetical, number, dot and underscore'
                    }
                }
            }, 
			bigtext_en:{
                validators: {
                    notEmpty: {
                        message: 'The bigtext_en is required and cannot be empty'
                    },
					 regexp: {                       
						  regexp: /^([^|;{}])+$/,
                        message: 'The bigtext_en  can only consist of alphabetical, number, dot and underscore'
                    }, 
					callback: {
                            message: 'The bio must be less than 10 characters long',
                            callback: function(value, validator, $field) {
                                // Get the plain text without HTML
                                var div  = $('<div/>').html(value).get(0),
                                    text = div.textContent || div.innerText;

                                return text.length <= 10;
                            }
                        }
                }
            },
			image_title_en:{
                validators: {
                    notEmpty: {
                        message: 'The image_title_en is required and cannot be empty'
                    },
					 regexp: {
                      
					     regexp: /^([^|;{}])+$/,
                        message: 'The image_title_en  can only consist of alphabetical, number, dot and underscore'
                    }
                }
            },
			headline_hu:{
                validators: {
                    notEmpty: {
                        message: 'The headline_hu is required and cannot be empty'
                    },
					 regexp: {
                      regexp:  /^([^|;{}])+$/,				 						
                      message: 'The headline_hu  can only consist of alphabetical, number, dot and underscore'
                    }
                }
            }, 
			bigtext_hu:{
                validators: {
                    notEmpty: {
                        message: 'The bigtext_hu is required and cannot be empty'
                    },
					 regexp: {                       
						  regexp: /^([^|;{}])+$/,
                        message: 'The bigtext_hu  can only consist of alphabetical, number, dot and underscore'
                    }, 
					callback: {
                            message: 'The bio must be less than 10 characters long',
                            callback: function(value, validator, $field) {
                                // Get the plain text without HTML
                                var div  = $('<div/>').html(value).get(0),
                                    text = div.textContent || div.innerText;

                                return text.length <= 10;
                            }
                        }
                }
            },
			image_title_hu:{
                validators: {
                    notEmpty: {
                        message: 'The image_title_hu is required and cannot be empty'
                    },
					 regexp: {
                      
					     regexp: /^([^|;{}])+$/,
                        message: 'The image_title_hu  can only consist of alphabetical, number, dot and underscore'
                    }
                }
            },
			headline_ge:{
                validators: {
                    notEmpty: {
                        message: 'The headline_ge is required and cannot be empty'
                    },
					 regexp: {
                      regexp:  /^([^|;{}])+$/,				 						
                      message: 'The headline_ge  can only consist of alphabetical, number, dot and underscore'
                    }
                }
            }, 
			bigtext_ge:{
                validators: {
                    notEmpty: {
                        message: 'The bigtext_ge is required and cannot be empty'
                    },
					 regexp: {                       
						  regexp: /^([^|;{}])+$/,
                        message: 'The bigtext_ge  can only consist of alphabetical, number, dot and underscore'
                    }, 
					callback: {
                            message: 'The bio must be less than 10 characters long',
                            callback: function(value, validator, $field) {
                                // Get the plain text without HTML
                                var div  = $('<div/>').html(value).get(0),
                                    text = div.textContent || div.innerText;

                                return text.length <= 10;
                            }
                        }
                }
            },
			image_title_ge:{
                validators: {
                    notEmpty: {
                        message: 'The image_title_ge is required and cannot be empty'
                    },
					 regexp: {
                      
					     regexp: /^([^|;{}])+$/,
                        message: 'The image_title_ge  can only consist of alphabetical, number, dot and underscore'
                    }
                }
            },
			image_width: {
                validators: {
                    notEmpty: {
                        message: 'The first name is required and cannot be empty'
                    },
					 regexp: {
                        regexp: /^(?:\d*)?\d+$/,
                        message: 'The image width  can only number!'
                    }
                }
            },
			image_height: {
                validators: {
                    notEmpty: {
                        message: 'The first name is required and cannot be empty'
                    },
					 regexp: {
                        regexp: /^([0-9])+$/,
                        message: 'The image height  can only number!'
                    }
                }
            },
			files: {
			 validators: {
			         file: {
                        extension: 'jpeg,png',
                        type: 'image/jpeg,image/png',
                        maxSize: 2048 * 1024,   // 2 MB
                        message: 'The selected file is not valid'
                          }
			            }
			}			
				
        }
    })
	 .find('[name="bigtext_en"]')
            .ckeditor()
            .editor
                // To use the 'change' event, use CKEditor 4.2 or later
                .on('change', function() {
                    // Revalidate the bio field
                    $('#TextForm').bootstrapValidator('revalidateField', 'bigtext_en');
      });
	 $('#TextForm').bootstrapValidator({}).find('[name="bigtext_hu"]')
            .ckeditor()
            .editor
                // To use the 'change' event, use CKEditor 4.2 or later
                .on('change', function() {
                    // Revalidate the bio field
                    $('#TextForm').bootstrapValidator('revalidateField', 'bigtext_hu');
                });
				
	 $('#TextForm').bootstrapValidator({}).find('[name="bigtext_ge"]')
            .ckeditor()
            .editor
                // To use the 'change' event, use CKEditor 4.2 or later
                .on('change', function() {
                    // Revalidate the bio field
                    $('#TextForm').bootstrapValidator('revalidateField', 'bigtext_ge');
                });			
		

});
</script>
    </div>    
</body>
</html>
‹ JQ - preventDefault - nem működik Css - Böngésző scroll esetén a header nem ismétlődik. ›
 ■
1

Javítás

cszlak · 2014. Aug. 16. (Szo), 08.48
Egy kis változtatás, javítás közben amit találtam.

 $('#TextForm').find('[name="bigtext_hu"]')
            .ckeditor()
            .editor
                // To use the 'change' event, use CKEditor 4.2 or later
                .on('change', function() {
                    // Revalidate the bio field
                    $('#TextForm').bootstrapValidator('revalidateField', 'bigtext_hu');
					 alert("bigtext_hu alert box!");
                });
De továbbra sem csinál semmit, pedig az alert-ig eljut.
2

Komoly?

Hidvégi Gábor · 2014. Aug. 16. (Szo), 13.11
Szerinted ki fog egy ilyen hosszú kódot átnézni a két szép szemedért?
3

Nem kell átnézni.

cszlak · 2014. Aug. 16. (Szo), 18.03
Csak azért raktam ide a teljes oldlalt, hogy ne klejen fáradnia senkinek se egy teszt fájl készítésével.

A lényeg a következő rész.

 bigtext_hu:{
                validators: {
                    notEmpty: {
                        message: 'The bigtext_hu is required and cannot be empty'
                    },
					 regexp: {                       
						regexp: /^([^|;{}])+$/,
                        message: 'The bigtext_hu  can only consist of alphabetical, number, dot and underscore'
                    }, 
					callback: {
                            message: 'The bio must be less than 10 characters long',
                            callback: function(value, validator) {
                                // Get the plain text without HTML
                                 var div  = $('<div/>').html(value).get(0);
                                var text = div.textContent || div.innerText;
                   //alert(text);
                                return text.length <= 500; 		 		
								
							/*  var code = $('[name="bigtext_hu"]').code();
                                // <p><br></p> is code generated by Summernote for empty content
								alert("bigtext_hu alert box!" + code);
                                return (code !== '' && code !== '<p><br></p>');	 */
								
								
                            }
                        }
                }
            },

ez hiányzot neki

 excluded: [':disabled'],
DE még mindig csak a hosszával foglalkozik, a belevitt karakterekkel nem

és még a toolbar configgal is meg gyűlt a bajom:

 if (CKEDITOR.instances['bigtext1']) { 
		 
  CKEDITOR.remove(CKEDITOR.instances['bigtext1']);   
		                
	  CKEDITOR.replace( 'bigtext1', {
	toolbar: [
	{ items: [ 'Source' ] }, 
	{ items: [ 'Bold', 'Italic', 'Underline' ] },
	{ items: [ 'TextColor' ] }	,
	{ items: [ 'Link' ] }	,	
	{ items: [ 'SpecialChar' ] },
	{ items: [ 'Undo', 'Redo' ] }	
	]			
  });  
 }
4

Ismét felteszem a kérdést:

Hidvégi Gábor · 2014. Aug. 16. (Szo), 18.37
Ismét felteszem a kérdést: miből gondoltad, hogy valaki a két szép szemedért végignézi a kódot, és kimazsolázza belőle a problémás részt? Mindenesetre kedves tőled, hogy megtetted, miután szóltam.

De nem elég, hogy hosszú, még elvárod, hogy keresgéljük meg a speckó js-eket és css-eket a netről, csak azért, hogy egyáltalán megnézhessük, miről van szó?

Ráadásul olyan a kódod, mint valami extra görbe este mellékterméke, tabok és szóközök véletlenszerűen keverve, mint sör és a bor, mindenféle logika nélküli sortörések.
5

Köszi

cszlak · 2014. Aug. 16. (Szo), 19.29
Köszi a válaszod.
Tökéletes pont ezt kerestem és megoldotta(m) minden gondomat.

Még egyszer köszi. Tied a pont.
6

Szivi

Hidvégi Gábor · 2014. Aug. 16. (Szo), 20.04
Örülök, hogy segíthettem, fordulj hozzám bármikor bizalommal!