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; 
 }

它在codeigniter3中显示多个验证错误而不是一个

2 个答案: