Search the Community

I need you're help with jquery form validation. I have been using jguery form validation but when I have included ckeditor on the page validation stopped working. I can't figure out why. I'm not very good with javascript so it's hard for me to figure out what is blocking it. Html form I'm using is: <form action="save_costs.php" method="POST" role="form" id="form2"> <div class="row"> <div class="col-md-12"> <div class="errorHandler alert alert-danger no-display"> <i class="fa fa-times-sign"></i> You have some form errors. Please check below. </div> <div class="successHandler alert alert-success no-display"> <i class="fa fa-ok"></i> Your form validation is successful! </div> </div> <div class="col-md-6"> <div class="form-group"> <label class="control-label"> <?php if ($_SESSION['language'] == "English") { echo "Name"; } else if ($_SESSION['language'] == "Croatian") { echo "Naziv"; } ?> <span class="symbol required"></span> </label> <input type="text" placeholder="Insert name" class="form-control" id="name" name="name" /> </div> <div class="form-group"> <label class="control-label"> <?php if ($_SESSION['language'] == "English") { echo "Description"; } else if ($_SESSION['language'] == "Croatian") { echo "Opis"; } ?> <span class="symbol required"></span> </label> <input type="text" placeholder="Insert description" class="form-control" id="description" name="description" /> </div> </div> <div class="col-md-6"> <div class="row"> </div> </div> </div> <div class="row"> <div class="col-md-12"> <div class="form-group"> <label class="control-label"> <?php if ($_SESSION['language'] == "English") { echo "Comments"; } else if ($_SESSION['language'] == "Croatian") { echo "Komentari"; } ?> </label> <textarea class="ckeditor form-control" id="editor2" name="comment" cols="10" rows="10"></textarea> </div> </div> </div> <div class="row"> <div class="col-md-12"> <div> <span class="symbol required"></span><?php if ($_SESSION['language'] == "English") { echo "Required Fields"; } else if ($_SESSION['language'] == "Croatian") { echo "Obavezna polja"; } ?> <hr /> </div> </div> </div> <div class="row"> <div class="col-md-8"> </div> <div class="col-md-4"> <button class="btn btn-primary btn-wide pull-right" type="submit"> <?php if ($_SESSION['language'] == "English") { echo "Submit"; } else if ($_SESSION['language'] == "Croatian") { echo "Spremi"; } ?> <i class="fa fa-arrow-circle-right"></i> </button> </div> </div> </form> Javascript file is attached. This is how I initalise form validation and CKeditor. <script src="../vendor/jquery/jquery.min.js"></script> <script src="../vendor/jquery-validation/jquery.validate.min.js"></script> <script src="../vendor/ckeditor/ckeditor.js"></script> <script src="../vendor/ckeditor/adapters/jquery.js"></script> <script src="../items/js/article_validation.js"></script> <script> <script> jQuery(document).ready(function() { Main.init(); FormValidator.init(); CKEDITOR.instances."editor2".on('blur', function(){CKEDITOR.instances."editor2".updateElement();}); }); </script> Can you, please, help me? I tried everything I thought it could block it. I don't know what to do anymore.

Hello, I could not figure wether this question should be posted in the javascript forum or here. I am building a simple blog commenting application that displays a comment reply box whose textarea has a dynamically generated ID when a reply link is clicked Take a look at my html code below: <div> <div> Some message over here </div> <div style = "height:10px;"> <a class="reply" id="myHeader1" href="javascript:showonlyone('newboxes1');" >Reply</a></div> </div> <div class ="replymsgbox" id="newboxes1"> <form method="POST"> <textarea id="" class="content"></textarea> </form> </div> <div> <div> Some message over here </div> <div style = "height:10px;"> <a class="reply" id="myHeader2" href="javascript:showonlyone('newboxes2');" >Reply</a></div> </div> <div class="replymsgbox" id="newboxes2"> <form method="POST"> <textarea id="" class="content" ></textarea> </form> </div> And this is the javascript dynamically generating the ID: The javascript script below uses the parent(); children() and next() jquery methods to traverse the DOM and select the textarea element of the displayed form so as to assign the 'ID attribute' to it. <script type="text/javascript"> $('a.reply').on("click", function(e){ $(this).parent("div").parent("div").next("div").children('form').children('textarea').attr( "id", "ckeditor" ); }); </script> When the reply link is clicked, the comment box with a form is toggled using the jquery show() and hide() functions. See code snippet below: <script src="views/js/jquery-1.11.2.min.js" type="text/javascript"></script> <script type="text/javascript"> function showonlyone(thechosenone) { $('.replymsgbox').each(function(index) { if ($(this).attr("id") == thechosenone) { $(this).show(200); } else { $(this).hide(600); } }); } </script> I then wish to replace the dynamic (textarea id="comment") with a CKEditor instance using the code below: <script src="libraries/ckeditor/ckeditor.js"></script> <script type="text/javascript"> $(document).ready(function() { if(CKEDITOR) { // Replace the <textarea id= "ckeditor"> with a CKEditor instance. CKEDITOR.replace('ckeditor'); } }); </script> However, when I toggle the comment form, (the id="ckeditor") attribute is assigned, but what appears is a simple textarea not with ckeditor enabled on it. How can I make each new dynamically created textareas use CKeditor? or Why is the CKEDITOR replace() method not detecting the textarea ID? Perhaps someone here may have any clues? Note: that when I hardcode the id='ckeditor' attribute value pair into any of the text areas, that textarea is converted into a rich text editor.