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; }
}
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:
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.