如何在 asp.net 内核中使用 jquery 验证 ckeditor？

Question

I want to validate a required ckeditor and when it's empty and the user submits the form it should show a message to user to fill the description.I searched a lot but none of the solutions worked.This is the jquery:

$(document).ready(function () {

        $("#formTicket").validate(
            {
                ignore: [],
                debug: false,
                rules: {
                    Description: {
                        required: function () {
                            CKEDITOR.instances.Description.updateElement();
                        }
                    }
                },
                messages:
                {
                    Description: {
                        required: "Please enter Text"
                    }
                }
            });
    });

This is the html:

  <form id="formTicket" asp-action="NewTicket" asp-controller="Ticket" method="post" 
          enctype="multipart/form-data">
                       
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label>توضیحات*</label>
                                    <textarea rows="5" class="form-control" asp-for="Description"> 
                        </textarea>
                                    <span asp-validation-for="Description" class="text-danger"> 
                            </span>

                                </div>
                            </div>
                        </div>
                       
                        <input type="submit" id="submitButton" class="btn btn-info btn-fill pull- 
                         right" onclick="return confirm('آیا از ارسال مطمئن هستید؟')" 
                   name="submitButton" value="ارسال">
                        <div class="clearfix"></div>
                    </form>

This is the model I use for the view:

public class TicketViewModel
{            
    [Required(ErrorMessage = AttributeMessages.Required)]
    public string Reciever { get; set; }             
    public string SubReciever { get; set; }      
    [Required(ErrorMessage = AttributeMessages.Required)]
    [MaxLength(200, ErrorMessage = AttributeMessages.MaxLength)]
    public string Title { get; set; }      
    [Required(ErrorMessage = AttributeMessages.Required)]
    public string Description { get; set; }
  
}

Answer 1

Have you added these scripts ?

<script src="https://cdn.ckeditor.com/4.16.0/standard/ckeditor.js"></script>
<script src="~/lib/jquery-validation/dist/jquery.validate.min.js"></script>
<script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"></script>

And from your code, have you truly applied ckeditor? you should add ' class=ckeditor ' to your textarea.

And asp-for should be replaced with name and id .

this is my demo:

<form id="formTicket" asp-action="NewTicket" asp-controller="Ticket" method="post"
  enctype="multipart/form-data">
<div class="row">
    <div class="col-md-12">
        <div class="form-group">
            <label>توضیحات*</label>
            <textarea rows="5" class="ckeditor" name="Description" id="Description" > </textarea>
            <span asp-validation-for="Description" class="text-danger">
            </span>
        </div>
    </div>
</div>
<input type="submit" id="submitButton" class="btn btn-info btn-fill pull-
                     right" onclick="return confirm('آیا از ارسال مطمئن هستید؟')"
       name="submitButton" value="ارسال">
<div class="clearfix"></div>
 </form>


@section Scripts
{
<script src="https://cdn.ckeditor.com/4.16.0/standard/ckeditor.js"></script>
<script src="~/lib/jquery-validation/dist/jquery.validate.min.js"></script>
<script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {

        $("#formTicket").validate(
            {
                ignore: [],
                debug: false,
                rules: {
                    Description: {
                        required: function () {
                            CKEDITOR.instances.Description.updateElement();
                        },
                        minlength: 10
                    }
                },
                messages:
                {
                    Description: {
                        required: "Please enter Text",
                        minlength: 10
                    }
                }
            });
    });
</script>
}

Result: