In this article I will explain with an example, how to perform Required (Not Empty) validation for TinyMCE RichTextBox (RichTextEditor) using Data Annotations and jQuery in ASP.Net MVC.
 
 
Configuring Bundles
Please refer the following article for complete information on how to configure Bundles in ASP.Net MVC project.
Using Bundles (ScriptBundle) in ASP.Net MVC Razor
 
 
Model
The following Model class consists of one property PersonalDetails to which the following Data Annotation attributes have been applied.
1. Display Data Annotation attribute is used for displaying the Label for the property.
2. Required Data Annotation attribute is used for validation of the property.
3. AllowHtml Data Annotation attribute is used for enabling posting of HTML content via input fields which by default is disabled. For more details, please refer What is AllowHtml attribute, its Uses and Examples in ASP.Net MVC.
public class PersonModel
{
    [Display(Name = "Personal Details:")]
    [Required(ErrorMessage = "Personal Details is required.")]
    [AllowHtml]
    public string PersonalDetails { get; set; }
}
 
 
Controller
The Controller consists of two Action methods.
Action method for handling GET operation
Inside this Action method, simply the View is returned along with the object of the PersonModel class object.
 
Action method for handling POST operation
This action method handles the POST operation and when the form is submitted, the object of the PersonModel class is sent to this method which is ultimately returned back to the View.
public class HomeController : Controller
{
    // GET: Home
    public ActionResult Index()
    {
        return View(new PersonModel());
    }
 
    [HttpPost]
    public ActionResult Index(PersonModel person)
    {
        return View(person);
    }
}
 
 
View
Inside the View, in the very first line the PersonModel class is declared as Model for the View.
The View consists of an HTML Form which has been created using the Html.BeginForm method with the following parameters.
ActionName – Name of the Action. In this case the name is Index.
ControllerName – Name of the Controller. In this case the name is Home.
FormMethod – It specifies the Form Method i.e. GET or POST. In this case it will be set to POST.
Inside the View, the following three HTML Helper functions are used:-
1. Html.LabelFor – Displaying the Model property name.
2. Html.TextAreaFor – Creating a TextArea (Multiline TextBox) for the Model property.
3. Html.ValidationMessageFor – Displaying the Validation message for the property.
There is also Submit button which when clicked, the Form gets submitted. After the submission, the value of the PersonalDetails property is displayed using HTML SPAN.
The jQuery script bundles are rendered at the end of the Model using the Scripts.Render function. The TinyMCE plugin is applied to the TextArea by rendering the TinyMCE from its CDN.
@model TinyMCE_MVC.Models.PersonModel
 
@{
    Layout = null;
}
 
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width"/>
    <title>Index</title>
    <style type="text/css">
        body {
            font-family: Arial;
            font-size: 10pt;
        }
 
        .error {
            color: red;
        }
    </style>
</head>
<body>
    @using (Html.BeginForm("Index", "Home", FormMethod.Post))
    {
 
        @Html.LabelFor(m => m.PersonalDetails)<br/>
        @Html.TextAreaFor(m => m.PersonalDetails)
        @Html.ValidationMessageFor(m => m.PersonalDetails, "", new { @class = "error" })
        <br/><br/>
        <input type="submit" value="Submit"/>
        <br/>
        <span>@Html.Raw(Model.PersonalDetails)</span>
    }
    @Scripts.Render("~/bundles/jquery")
    <script type="text/javascript" src="//tinymce.cachefly.net/4.0/tinymce.min.js"></script>
    <script type="text/javascript">
        tinymce.init({ selector: 'textarea', width: 500 });
    </script>
</body>
</html>
 
 
Screenshot
TinyMCE Editor Required (Not Empty) validation using Data Annotations and jQuery in ASP.Net MVC
 
 
Downloads
Download Code