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.

I had the exact same issue... And I could not solve it on the client side. The problem is somehow that CKeditor does not syncronize the contect of the editor with the textarea that the validation checks before client validation is fired. I have tried to syncronize on the blur or forceBlur events but that did not work either.... So I ended up having it validated only on server side. If you have a solution please post it. :) — apolka, Jul 29 '10 at 07:25

score 1 · Accepted Answer · answered Jul 29 '10 at 07:45

1

I figured it out!

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

Yeehaw.

answered Jul 29 '10 at 07:45

asfsadf

3,822
7
31
41

MVC client validation causing false errors

1 Answers1