TinyMCE client validation problem

Question

Hi, 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();
});