How does MVC Client Side validation work exactly?

Question

I have used MVC MVC 2.0 Client Side validation, but it does not work as expected. Now I am trying to find out, what I did wrong. How does it work? I have this rendered form:

<form method="post" action="/Sprint/Edit/68d4886b-a86a-4f0b-b713-39219febddf3">

        <fieldset>

            <legend>Sprint</legend>

            <table>

<tbody><tr>
    <td><label for="sprint_Title">Title</label></td>
    <td><input type="text" value="Wichtige Private Erledigungen" name="sprint.Title" id="sprint_Title" class="input-box t-input"></td>
    <td><span class="error"><span id="sprint_Title_validationMessage" class="field-validation-valid"></span></span></td>
</tr>

<tr>
    <td><label for="sprint_Date">Date</label></td>
    <td>
        <div id="sprint_Date" class="date-picker t-input t-widget t-datepicker"><input value="12.05.2010" name="sprint.Date" id="sprint_Date-input" class="t-input" autocomplete="off"><a title="Open the calendar" tabindex="-1" href="#" class="t-link t-icon t-icon-calendar">select date</a></div>
    </td>
    <td><span class="error"><span id="sprint_Date_validationMessage" class="field-validation-valid"></span></span></td>
</tr>


<tr>
    <td><label for="sprint_Description">Description</label></td>
    <td><textarea rows="10" name="sprint.Description" id="sprint_Description" cols="80" class="t-input">dsfs1</textarea></td>
    <td><span class="error"><span id="sprint_Description_validationMessage" class="field-validation-valid"></span></span></td>
</tr>
            </tbody></table>

        </fieldset>

    <input type="submit" value="Submit" name="Submit" id="Submit" class="t-button t-state-default">

</form>

And this script is rendered:

<script type="text/javascript">
//<![CDATA[
if (!window.mvcClientValidationMetadata) { window.mvcClientValidationMetadata = []; }
window.mvcClientValidationMetadata.push({"Fields":[{"FieldName":"sprint.Title","ReplaceValidationMessageContents":true,"ValidationMessageId":"sprint_Title_validationMessage","ValidationRules":[{"ErrorMessage":"Title is required.","ValidationParameters":{},"ValidationType":"required"}]},{"FieldName":"sprint.Date","ReplaceValidationMessageContents":true,"ValidationMessageId":"sprint_Date_validationMessage","ValidationRules":[{"ErrorMessage":"Das Feld \"Date\" ist erforderlich.","ValidationParameters":{},"ValidationType":"required"}]},{"FieldName":"sprint.Description","ReplaceValidationMessageContents":true,"ValidationMessageId":"sprint_Description_validationMessage","ValidationRules":[]}],"FormId":null,"ReplaceValidationSummary":false});
//]]>
</script>

But to my surprise the breakpoint only stops at page load. I think it should be also if a field is tabbed? At least, after I press the post button.

Why does client side validation not work for me?

Answer 1

This just sets up the handlers, it won't actually hit this line when the form is submitted, nor when you tab between fields.

You will get validation errors upon losing focus and/or form submission, however if you have other javascript errors on the page it can cause this to fail.

Also, make sure you've reference the required javascript files in your header:

• MicrosoftAjax.js
• MicrosoftMvcValidation.js