Validating WMD Editor content

Question

I want to validate (as a RequiredField) the WMD Editor content

<div class="wmd-panel">
    <div id="wmd-editor">
        <div id="wmd-button-bar"></div>
            <textarea id="wmd-input" name="Body" rows="2" cols="50"></textarea>
            <%: Html.ValidationMessageFor(post => post.Body) %>
        </div>
    <div style="margin-top: 10px; height: 24px;" class="fr"> </div>
    <div id="wmd-preview"></div>
</div>

I'm using its name as Body to be bound to the Linq-to-Sql Column Body. I want the validation to be enabled at client-side so that no data will be sent to the server if the model has an issue.

As you can see, I tried to put Html.ValidationMessageFor(post => post.Body) but I am still able to send a Post request without filling the Body field.

Answer 1

You need to use HTML helpers to generate the textarea if you want client validation to work:

<%= Html.TextAreaFor(post => post.Body, 2, 50, new { id = "wmd-input" }) %>
<%= Html.ValidationMessageFor(post => post.Body) %>

This will emit the proper HTML5 data-* attributes on the textarea that will allow for client validation to work using the jquery.validate plugin.