0

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;
        }

2 Answers 2

2

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

3
  • It is not working. I have done the following 2 (in my answer below) Aug 28, 2012 at 17:45
  • Hi, it wont be able to find the form on that selector, either put a # in front of the id, or just use "form" as in my answer
    – Slicksim
    Aug 28, 2012 at 18:02
  • Thanks for your help. I am utilizing cluetip onshow and changed to "form" Aug 29, 2012 at 3:40
0

Since this form is pulled in by cluetip, i have added to it to OnShow nethod.

<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',
            onShow: function (ct, ci) {
                $.validator.unobtrusive.parse("ExtendExpirationDateForm"); //client side validation

            }
        });
    </script>

When the above didnt work then i added it to my control. Still no luck.

<script type="text/javascript">
    $(document).ready(function() {
        $.validator.unobtrusive.parse("ExtendExpirationDateForm"); //client side validation
    });
</script>

Both above, i copied using firebug 1.10.2.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.