MVC client validation causing false errors

Question

I'm hoping someone has run into something similar. A text input with text is triggering the client-side [Required] error message.

I have the following included in the master:

<script src="/Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script src="/Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
<script src="/Scripts/MicrosoftAjax.js" type="text/javascript"></script>
<script src="/Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script>
<script src="/Scripts/MicrosoftMvcAjax.debug.js" type="text/javascript"></script>
<script src="/Scripts/MicrosoftMvcValidation.js" type="text/javascript"></script>
<script src="/Scripts/jquery.validate.js" type="text/javascript"></script>

as well as having

<% Html.EnableClientValidation(); %>

in the view.

A couple possible factors:

• The form is in a partial view
• The submitted text is coming from CKEditor
• The CKEditor is hidden on page load and then revealed via jQuery

I'm just not sure what could be causing this.

Form:

<form action="/Quote/Create/1" id="form0" method="post"><div class="validation-summary-valid" id="validationSummary"><ul><li style="display:none"></li>

</ul></div>
<fieldset>
    <legend>Fields</legend>
    <div class="editor-field">
        <input id="QuoteID" name="QuoteID" type="hidden" value="0" />
    </div>
    <div class="editor-field">
        <input id="UserID" name="UserID" type="hidden" value="54cb0fde-649d-429c-8800-6bd9cc286d90" />
    </div>

        <div class="editor-label">
        <label for="PageNumber">PageNumber</label>
    </div>
    <div class="editor-field">
        <input id="PageNumber" name="PageNumber" type="text" value="" />
        <span class="field-validation-valid" id="PageNumber_validationMessage"></span>
    </div>
    <div class="editor-label">

        <label for="QuoteText">QuoteText</label>
    </div>
    <div class="editor-field">
        <textarea cols="20" id="QuoteText" name="QuoteText" rows="2">
</textarea>
        <span class="field-validation-valid" id="QuoteText_validationMessage"></span>
    </div>
    <div class="editor-field">
        <input id="BookID" name="BookID" type="hidden" value="1" />

    </div>
    <div class="editor-field">
        <input id="DateCreated" name="DateCreated" type="hidden" value="7/28/2010 9:21:36 PM" />
    </div>
    <p>
        <input id="quoteSubmit" type="submit" value="Create" />
    </p>
</fieldset>
</form><script type="text/javascript">
//<![CDATA[
if (!window.mvcClientValidationMetadata) { window.mvcClientValidationMetadata = []; }
window.mvcClientValidationMetadata.push({"Fields":[{"FieldName":"PageNumber","ReplaceValidationMessageContents":true,"ValidationMessageId":"PageNumber_validationMessage","ValidationRules":[{"ErrorMessage":"The field PageNumber must be a number.","ValidationParameters":{},"ValidationType":"number"}]},{"FieldName":"QuoteText","ReplaceValidationMessageContents":true,"ValidationMessageId":"QuoteText_validationMessage","ValidationRules":[{"ErrorMessage":"That quote is too long.","ValidationParameters":{"minimumLength":0,"maximumLength":500},"ValidationType":"stringLength"},{"ErrorMessage":"You didn\u0027t even enter a quote...","ValidationParameters":{},"ValidationType":"required"}]}],"FormId":"form0","ReplaceValidationSummary":false,"ValidationSummaryId":"validationSummary"});
//]]>
</script>

When I take out the

<% Html.EnableClientValidation(); %>

server-side validation works fine and generates no error.

Answer 1

I figured it out!

$('#quoteSubmit').click(function () { CKEDITOR.instances['QuoteText'].updateElement(); });

Yeehaw.