它顯示了多個驗證錯誤，而不是codeigniter3中的一個

Question

我編寫了一個代碼，顯示codeigniter3框架中的Ajax驗證錯誤。但是，按多次提交按鈕後，它會多次顯示錯誤消息，但是，我希望它顯示錯誤消息。另外，它不顯示textarea後的任何錯誤，儘管，刪除CKEditor它也沒有顯示錯誤。 我該如何解決這些問題？

這是我的觀點：

<div id="messages"></div> 

     <?php $attributes = array('class' => 'rex-forms', 'name' => 'continueregistrationform', 'id' => 'continueregistrationform'); ?> 
        <?= form_open_multipart('user/submit', $attributes); ?> 
     <div class="container-fluid"> 
      <div class="row"> 
       <div class="col-md-7"> 


        <div class="row"> 
        <div class="col-md-6 col-sm-6"> 
         <div id="name" class="input-group"> 
          <span class="input-group-addon"><i class="fa fa-user" aria-hidden="true"></i></span> 
          <input type="text" class="form-control" name="name" placeholder="Name" value="<?= $instructors['name']; ?>"> 
         </div><br> 
        </div> 


        <div class="col-md-6 col-sm-6"> 
         <div id="web" class="input-group"> 
          <span class="input-group-addon"><i class="fa fa-globe" aria-hidden="true"></i></span> 
          <input type="text" class="form-control" name="web" placeholder="Web-site" value="<?= $instructors['web']; ?>"> 
         </div><br> 
        </div> 
        </div> 

        <div class="row"> 
        <div class="col-md-6 col-sm-6"> 
         <div id="tel" class="input-group"> 
          <span class="input-group-addon"><i class="fa fa-phone" aria-hidden="true"></i></span> 
          <input type="text" class="form-control" name="tel" placeholder="Phone" value="<?= $instructors['phone']; ?>"> 
         </div><br> 
        </div> 
        <div class="col-md-6 col-sm-6"> 
         <div id="address" class="input-group"> 
          <span class="input-group-addon"><i class="fa fa-map-marker" aria-hidden="true"></i></span> 
          <input type="text" class="form-control" name="address" placeholder="Address" value="<?= $instructors['address']; ?>"> 
         </div><br> 
        </div> 
       </div> 
       <div class="row"> 
        <div class="col-md-6 col-sm-6"> 
         <div id="facebook" class="input-group"> 
          <span class="input-group-addon"><i class="fa fa-facebook-square" aria-hidden="true"></i></span> 
          <input type="text" class="form-control" name="facebook" placeholder="Facebook" value="<?= $instructors['fb']; ?>"> 
         </div><br> 
        </div> 


        <div class="col-md-6 col-sm-6"> 
         <div id="twitter" class="input-group"> 
          <span class="input-group-addon"><i class="fa fa-twitter-square" aria-hidden="true"></i></span> 
          <input type="text" class="form-control" name="twitter" placeholder="Twitter" value="<?= $instructors['twitter']; ?>"> 
         </div><br> 
        </div> 
        </div> 

        <div class="row"> 
        <div class="col-md-6 col-sm-6"> 
         <div id="youtube" class="input-group"> 
          <span class="input-group-addon"><i class="fa fa-youtube-square" aria-hidden="true"></i></span> 
          <input type="text" class="form-control" name="youtube" placeholder="Youtube" value="<?= $instructors['youtube']; ?>"> 
         </div><br> 
        </div> 
        <div class="col-md-6 col-sm-6"> 
         <div id="instagram" class="input-group"> 
          <span class="input-group-addon"><i class="fa fa-instagram" aria-hidden="true"></i></span> 
          <input type="text" class="form-control" name="instagram" placeholder="Instagram" value="<?= $instructors['instagram']; ?>"> 
         </div><br> 
        </div> 
        </div> 


       <div class="row"> 
        <div id="profiledesc" class="col-md-12 col-sm-12"> 
         <div class="col-md-12 input-group" > 
          <textarea name="insdescription" class="form-control" rows="5" placeholder="Description"><?= $instructors['description']; ?></textarea> 
         </div><br><br> 
        </div> 
        <script> 
         CKEDITOR.replace('profiledesc'); 
        </script> 
        </div> 



        <div class="row"> 
        <div class="col-md-8 col-sm-12"> 
         &nbsp; 
        </div> 
        <div class="col-md-4"> 
         <div class="modal-footer btncolor"> 
        <button type="submit" name="submit" id="submit" class="rex-bottom-medium rex-btn-icon"> 
         <span class="rex-btn-text">Submit</span> 
         <span class="rex-btn-text-icon"><i class="fa fa-arrow-circle-o-right"></i></span> 
        </button> 
        </div> 
         </div> 
        </div> 
       </div> 

      </div> 
     </div> 
     </form> 

這裏是我的ajax：

$(document).ready(function() { 
    $("#continueregistrationform").unbind('submit').bind('submit', function() { 
     var form = $(this); 


     $.ajax({ 
      url: form.attr('action'), 
      type: form.attr('method'), 
      data: form.serialize(), 
      dataType: 'json', 
      success:function(response) { 
      console.log(response);    
       if(response.success) {     
        $("#messages").html(response.messages); 
        $("#continueregistrationform")[0].reset(); 
        $(".text-danger").remove(); 
        $(".form-group").removeClass('has-error').removeClass('has-success'); 
        location.href = "http://localhost/edu-center/"; 

       } 
       else { 
        $("#messages").html(response.messages); 

        $.each(response.messages, function(index, value) { 
         var element = $("#"+index); 

         $(element) 
         .closest('.form-group') 
         .removeClass('has-error') 
         .removeClass('has-success') 
         .addClass(value.length > 0 ? 'has-error' : 'has-success') 
         .find('.text-danger').remove(); 

         $(element).after(value); 

        }); 
       } 
      } // /success 
     }); // /ajax 

     return false; 
    }); 
}); 

Answer 1

改變你的jQuery代碼到以下

$(document).ready(function() { 

var editor = CKEDITOR.replace('insdescription1'); 
$("#continueregistrationform").unbind('submit').bind('submit', function() { 
    var form = $(this); 

    // Check value of textarea and ckeditor before submit 
    for (instance in CKEDITOR.instances) { 
     CKEDITOR.instances[instance].updateElement(); 
    } 
    $.ajax({ 
     url: form.attr('action'), 
     type: form.attr('method'), 
     data: form.serialize(), 
     dataType: 'json', 
     success:function(response) { 
     console.log(response);    
      if(response.success) {     
       $("#messages").html(response.messages); 
       $("#continueregistrationform")[0].reset(); 
       $(".text-danger").remove(); 
       $(".form-group").removeClass('has-error').removeClass('has-success'); 
       location.href = "http://localhost/edu-center/"; 

      } 
      else { 
       $("#messages").html(response.messages); 
       $.each(response.messages, function(index, value) { 
        var element = $("#"+index); 
     $(element).parent('div').find('.text-danger').remove(); 
        $(element).after(value); 

       }); 
      } 
     } // /success 
    }); // /ajax 

    return false; 
}); 

}）;

對於insdescription或CKEDITOR驗證替換的視圖文件代碼小部分如下

變化

<div id="profiledesc" class="col-md-12 col-sm-12"> 
         <div class="col-md-12 input-group" > 
          <textarea name="insdescription" class="form-control" rows="5" placeholder="Description"></textarea> 
         </div><br><br> 
        </div> 

要

<div id="insdescription" class="col-md-12 col-sm-12"> 
    <div class="col-md-12 input-group" > 
     <textarea name="insdescription" id="insdescription1" class="form-control" rows="5" placeholder="Description"></textarea> 
    </div><br><br> 
</div> 

Answer 2

您可以使用下面的代碼來強制CKEDITOR使用更新textarea的值：

for (instance in CKEDITOR.instances) { 
    CKEDITOR.instances[instance].updateElement(); 
} 

使用方法：

<script src="ckeditor/ckeditor.js"></script> 
function saveData() 
{ 
    // You must need to add this code to update the ckeditor 
    for (instance in CKEDITOR.instances) { 
     CKEDITOR.instances[instance].updateElement(); 
    } 

    jQuery.ajax({ 
     type: 'POST', 
     url: 'save_data.php', 
     data: $("#formId").serialize() 
    }); 
    return false; 
}