Data-annotation

Question

Hi,Can I use data annotations with RTE? I set a property with the required attribute on the model, if RTE is not valued, the error message does not appear.I added "~/Scripts/jquery.validate.min.js",  "~/Scripts/jquery.validate.unobtrusive.min.js",~/Scripts/jquery.unobtrusive-ajax.min.js,"~/Scripts/ej/common/ej.unobtrusive.min.js",

Prince Oliver · Answer

Hi Pio, Thank you for contacting Syncfusion forums. Yes, you can use data annotations with RTE. Kindly ensure that following steps in your sample for data annotation to work with RTE. Step 1: Add necessary scripts and theme files for RTE and validation to work properly. [_Layout.cshtml] @Styles.Render("~/Content/ej/web/default-theme/ej.web.all.min.css") @Scripts.Render("~/Scripts/jquery-3.1.1.min.js") @Scripts.Render("~/Scripts/jsrender.min.js") @Scripts.Render("~/Scripts/jquery.validate.min.js") @Scripts.Render("~/Scripts/jquery.validate.unobtrusive.min.js") @Scripts.Render("~/Scripts/ej/ej.web.all.min.js") @Scripts.Render("~/Scripts/ej/ej.unobtrusive.min.js") Step 2: Enable client validation and unobtrusive JavaScript. [Web.Config] Step 3: Add a model class and make sure you include “AllowHtml” attribute for the RTE’s field to allow HTML content to be posted to the controller. [Model] public class RTEmodel { [AllowHtml] [Display(Name = "Description")] [Required(ErrorMessage = "Description is Required")] public string description { get; set; } } Step 4: Add a Form with RTEFor control. Include the label and validation message placeholders for RTE control. [View] @model RTEdataAnnotation.Models.RTEmodel

RTE - Data Annotation:

@using (Html.BeginForm()) { @Html.LabelFor(model => model.description) @Html.EJ().RTEFor(model => model.description) @Html.ValidationMessageFor(model => model.description, "", new { @class = "text-danger" })
@Html.EJ().Button("btn").Size(ButtonSize.Small).Text("Post").Type(ButtonType.Submit) } Step 5: Add script to modify the validator settings to include the hidden fields in validation. Since RTE uses hidden

Pio Luca Valvona · Answer

Thank you Prince,but it not working.In my case, the scenario is a template in grid:Template:

@PLV.Web.Resources.Ticket.Messaggio

$.validator.setDefaults({ ignore: [],// To include hidden fields in validation. }); function Complete(args) { if (args.requestType == "add") { $("#" + this._id + "_dialogEdit").ejDialog("option", "title", "@PLV.Web.Resources.Ticket.DialogNuovoTicket") $("#rteMessaggio").ejRTE({ allowEditing: true, enableResize: false, isResponsive: true, height: "250px", width: "250px", locale: "@CultureInfo.CurrentCulture.TextInfo.CultureName", toolslist: ["font", "style", "lists", "doAction", "clipboard"], tools: { font: ["fontSize", "fontColor"], styles: ["bold", "italic"], lists: ["unorderedList", "orderedList"], doAction: ["undo", "redo"], clipboard: ["cut", "copy", "paste"], links: [], images: [], media: [], tables: [], view: [] }, }).data("ejRTE"); Model:[AllowHtml] [Display(Name = "Messaggio", ResourceType = typeof(Resources.Ticket))] [Required(ErrorMessageResourceType = typeof(Resources.Ticket), ErrorMessageResourceName = "MessaggioObbligatorio")] public string Messaggio { get; set; }

Vignesh Natarajan · Answer

Hi Pio, 
 
Query: “if RTE is not valued, the error message does not appear.” 
 
We have analyzed your query and prepared a sample using your code snippet. We are able to reproduce the reported issue.  
We have achieved your requirement by extending the errorPlacement function of the validation rules in the ActionComplete event of the Grid when requestType is “add” 
Kindly modify your sample with below codes to enable validation to textarea.  
 





var proxy = this; 
            $("#" + this._id + "EditForm").validate().settings.errorPlacement = function (error, element) { 
                if (element.attr("ID") == "ShipCity") { 
                    $container = $(error).addClass("e-error"); 
                    $tail = ej.buildTag("div.e-errortail e-toparrow"); 
                    $container.prepend($tail); 
                    $container.insertAfter(element.closest(".e-widget"))                
 
                } 
            }  
 
For your convenience we have prepared a sample which can be downloaded from below link 
 
Sample: http://www.syncfusion.com/downloads/support/forum/135958/ze/SyncfusionMvcApplication40762909438  
 
Note: If you need to change the position of the validation message, you can change its position by applying position styles to $container. 





$container.offset({ left: $(element).parent().position().left + $(element).closest("td").width()   
 
 
 
Please get back to us if you need further assistance. 
 
Regards, 
Vignesh Natarajan

Pio Luca Valvona · Answer

Thank you Vignesh.Now it works with RTE, but the other controls on the form no longer show the validation error.Luca

Vignesh Natarajan · Answer

Hi Pio, 

Thanks for the update. 

We have analyzed your issue and we are able to reproduce the reported issue at our end. 

Kindly make modification as mentioned in below code snippet 





function complete(args) { 
        if (args.requestType == "add") { 
           var proxy = this; 
            $("#" + this._id + "EditForm").validate().settings.errorPlacement = function (error, element) { 
                if (element.attr("ID") == "ShipCity") { // for RTE  edit  column 
                    $container = $(error).addClass("e-error"); 
                    $tail = ej.buildTag("div.e-errortail e-toparrow"); 
                    $container.prepend($tail); 
                    $container.insertAfter(element.closest(".e-widget")); 
 
                } 
                else {  // for other edit columns 
                    var gridObject = proxy, elements = proxy.model.scrollSettings.frozenColumns > 0 || proxy.model.editSettings.showAddNewRow ? proxy.element.find(".gridform") : $("#" + proxy._id + "EditForm"); 
                    gridObject._renderValidator(error, element); // defined in our source to perform validation 
                } 
            } 

For your convenience we have modified the sample which can be downloaded from below link 

Sample: http://www.syncfusion.com/downloads/support/forum/135958/ze/SyncfusionMvcApplication40_(2)-1036471365  

Please get back to us if have any queries. 

Regards, 
Vignesh Natarajan

Pio Luca Valvona · Answer

Thank you Vignesh.Now it works.Luca

Vignesh Natarajan · Answer

Hi Pio Luca, 

Thanks for the update. 

We are happy to hear that your query has been resolved by our solution. 

Please get back to us if you have any further queries. 


Regards, 
Vignesh Natarajan

Subul Marketing · Answer

Yes, you can use data annotations with Rich Text Editors (RTE) in your application. The Required attribute is used to specify that a property must have a non-null value. If the property is not valued and the error message is not appearing, it could be due to a few reasons.

First, make sure that the ModelState.IsValid property is being checked in your controller action method. This property is set to false if there are any validation errors in the model state. If ModelState.IsValid is false, you can return the view with the validation errors by using return View(model), where model is the object that failed validation.

Second, make sure that the validation message is being displayed in the view. You can use the @Html.ValidationMessageFor helper method to display the validation message associated with a specific property. For example, if the property is called MyProperty, you can use @Html.ValidationMessageFor(m => m.MyProperty) to display the validation message for that property.

If the above steps do not resolve the issue, there may be a problem with the way the RTE is interacting with the model binding and validation process. In this case, you may need to debug the code and/or consult the documentation or support resources for the RTE library you are using. For more Infor visit Subul

For more Infor visit Subul