TinyMCE client validation problem

Question

I have problem with TinyMCE editor. I have form with few text fields and textarea (tinymce), and enabled client validation. When I click save button validation occures on all text fields, but it takes 2 click to validate tinymce content. Furthermore, validation shows message only when field is empty, or if condition is not satisfied (just for test causes, max 5 characters can be entered), but when I enter right number of characters ( less then 5 ), error message stays.

Here's code sample:

    <%Html.EnableClientValidation(); %>
    <%= Html.ValidationSummary(true, "Na stranici postoje greške.", new { @style = "color: red;" })%></p>
    <% using (Html.BeginForm("Create", "Article", FormMethod.Post, new { enctype = "multipart/form-data" }))
       { %>
    <fieldset>
        <legend>Podaci za Aranžman</legend>
            <label class="EditLabel" for="name">
                Opis</label>
            <br />
            <%= Html.TextAreaFor(Model => Model.Description, new { style = "width: 100%; height: 350px;", @class = "tinymce" })%>
            <%= Html.ValidationMessageFor(Model => Model.Description, "", new { @style = "color: red;" })%>
        <p>
            <input type="submit" value="Sačuvaj aranžman" />
        </p>
    </fieldset>
    <% } %>

and the property

    [Required(ErrorMessage = "Unesi opis")]
    [StringLength(5, ErrorMessage = "Opis mora imati manje od 5 znakova")]
    public string Description { get; set; }

Any suggestions???

Answer 1

The reason behind this is that most rich text editors (including tiny mce) doesn't use the text area. Instead it has it's own input and only copies over the text when the form is submitted. So the field you are validating doesn't actually change when you type something in the editor.

What you will have to do is create a work around for this that copies the text from the editor to the text area when you click the submit button. This can be done like this:

$('#mySubmitButton').click(function() {
    tinyMCE.triggerSave();
});

Answer 2

If you have same problem like Tinymce required validation is not fire on form submit time i have one solution like this, i know this is not proper way but it work fine see the below code install tynymce jquery package in your application

THIS IS MODEL

[Required(ErrorMessage = "Please enter About Company")]
[Display(Name = "About Company : ")]
[UIHint("tinymce_jquery_full"), AllowHtml]
public string txtAboutCompany { get; set; }

now in cshtml file means in our view

<div class="divclass">
   @Html.LabelFor(model => model.txtAboutCompany, new { @class = "required" })
   @Html.EditorFor(model => model.txtAboutCompany)
   <span class="field-validation-error" id="AC" style="margin:9px 0 0 157px;"></span>
</div>

and on submit button click event check this jquery

$("#BusinessProfile").click(function () {
        var aboutC = $("#txtAboutCompany").val()
        var pinfo = $("#txtProductinfo").val();
        if (aboutC == "" && pinfo == "") {
            $("#AC").append("").val("").html("Please enter about company")
            $("#PI").append("").val("").html("Please enter product information")
            $("#bpform").valid();
            return false;
        } else if (aboutC == "") {
            $("#PI").append("").val("").html("")
            $("#AC").append("").val("").html("Please enter about company")
            $("#txtAboutCompany").focus();
            $("#bpform").valid();
            return false;
        } else if (pinfo == "") {
            $("#AC").append("").val("").html("")
            $("#PI").append("").val("").html("Please enter product information")
            $("#txtProductinfo").focus();
            $("#bpform").valid();
            return false;
        }
        else {
            $("#AC").append("").val("").html("");
            $("#PI").append("").val("").html("");
            //return true;
            $("#bpform").validate();
        }
    });

try this code,