Question

i have validation working on the form that is on the page.

I have one action that brings in html via ajax, a partial view in this case gets pushed out. On this form, my validation is not working.

HTML pushed out, i have also tested with pushing the js with it and still no luck:

<!-- form, AJAX and validation -->
<script type="text/javascript" src="/NetSite/Scripts/Tools/jqueryplugins/jquery.form.js"></script>
<script type="text/javascript" src="/NetSite/Scripts/jqueryMain/jquery.unobtrusive-ajax.min.js"></script>
<script type="text/javascript" src="/NetSite/Scripts/jqueryMain/jquery.validate.1.9.0/jquery.validate.min.js"></script>
<script type="text/javascript" src="/NetSite/Scripts/jqueryMain/jquery.validate.unobtrusive.min.js"></script>

<form action="/Transfer/ExtendExpirationDate" id="ExtendExpirationDateForm" method="post">

<input data-val="true" data-val-required="The XPhase field is required." id="Detail_XPhase" name="Detail.XPhase" type="hidden" value="870033f4-670e-4315-a23a-fc6ebb24cafe" />
<input data-val="true" data-val-number="The field Id must be a number." data-val-required="The Id field is required." id="Detail_Id" name="Detail.Id" type="hidden" value="100138062" />
<input data-val="true" data-val-number="The field Id must be a number." data-val-required="Response required!" id="DaysToExpire_Id" name="DaysToExpire.Id" type="hidden" value="100138062" />        

<table class="siteTable">
            <tbody>
                <tr>
                    <th style="width: 40%;">Posted Date</th>
                    <td style="width: 60%;">08/27/2012</td>
                </tr>
                <tr>
                    <th>Expiration Date</th>
                    <td>09/03/2012</td>
                </tr>
                <tr>
                    <th>Current Days to Expiry</th>
                    <td>7</td>
                </tr>
                <tr>
                    <th>New Days to Expiry</th>
                    <td>
                        <input data-val="true" data-val-digits="The field should contain only digits" data-val-number="The field DaysToExpire must be a number." data-val-range="Value should be greater than 0" data-val-range-min="1" data-val-required="Response required!" id="DaysToExpire_DaysToExpire" maxlength="3" name="DaysToExpire.DaysToExpire" size="4" type="text" value="14" />
                        <span class="field-validation-valid" data-valmsg-for="DaysToExpire.DaysToExpire" data-valmsg-replace="true"></span>
                    </td>
                </tr>
                <tr>
                    <th class="empty"></th>
                    <td><button type="submit" title="Update" id="ExtendExpirationUpdateButton" class="gradientbutton gradientsmall gradientorange">Update</button></td>
                </tr>
            </tbody>
        </table>
</form>

clue tip call that brings in the html:

<script type="text/javascript">
        $('.ExtendExpirationDate').cluetip({
            attribute: 'rel',
            showTitle: true,
            sticky: true,
            closeText: JSGlobalVars.CloseImagePath, 
            ajaxCache: false,
            arrows: true,
            dropShadow: false,
            activation: 'click', //click, hover
            height: 'auto',
            closePosition: 'title',
            width: '400px'
        });
    </script>

Action:

public ActionResult ExtendExpirationDate(Guid transferGuid)
        {
            ActionResult result = null;

            var errorModel = new ContentShowError();
            errorModel.IsError = false;

            var xfer = MyInstance.GetFilesGuid(transferGuid);
            if(xfer == null)
            {
                errorModel.IsError = true;
                errorModel.Message = base.GetDisplayMessage(ProcessingMessagesEnum.ErrorNoDataFound);
                result = PartialView(ViewNames.ErrorControl, errorModel);
            }
            else
            {
                var model = new ExtendExpiryDateViewModel();
                model.Detail = xfer;
                model.DaysToExpire = new ExtendDaysToExpire()
                    {
                        DaysToExpire = xfer.DaysToExpire + 7,
                        Id = xfer.Id
                    };
                result = PartialView(ViewNames.ExtendExpirationDateControl, model);
            }

            return result;
        }

Answer 1

The unobtrusive validator is only wired up on the original dom load event, not on subsequest pulls in.

When the form is inserted into the DOM, call

$.validator.unobtrusive.parse("form");

to wire up the form for validating.

Regards

Si