ASP.Net MVC - Client side validation breaks after a partial refresh?

Question

I have a page that contains a search bar, and on default it displays a list of items below. Each item is wrapped inside an ajaxform so that the user can update the quantity. The client side validation works perfectly fine on page load, and it requires a quantity.

As soon as the user clicks search, and the result of the partial is refreshed my whole validation breaks, and it doesn't display validation summary anymore.

I tried to add the validation back after refreshing the partial by calling $.validator.unobtrusive.parse($("#resultList")); but it doesn't seem to do anything.

Any solutions?

MainForm

<script>
function onSearchSucceeded() {
   $.validator.unobtrusive.parse($("#resultList"));
}

function onUpdateSucceeded() {
   $.validator.unobtrusive.parse($("#resultList"));
}

$(function () {

    $("#resultList :input[type=text]").blur(function () {
        $(this).closest("form").submit();
    });

)};

</script>


@using (Ajax.BeginForm("Search",
    null,
    new AjaxOptions
    {
        UpdateTargetId = "resultList",
        LoadingElementId = "searchLoader",
        OnSuccess = "onSearchSucceeded"
    },
    new
    {
        id = "searchForm"
    }
    ))
{
   @Html.TextBoxFor(m => m.query)
   <input type="submit" value="search" />
}


<div id="resultList">
   @Html.Partial("SearchResult", Model.Results)
</div>

Partial

@foreach (var item in Model) {
    using (Ajax.BeginForm("UpdateItem",
        new AjaxOptions {
            UpdateTargetId = "resultList",
            OnSuccess = "onUpdateSucceeded"
        },
        null,
        new{
            id = "form-" + item.Id
        }
     )){
       @Html.TextBoxFor(m => item.Quantity)
       @Html.ValidationSummary()
       // This form gets submitted through javascript after a blur on quantity textfield
     }
}

score 2 · Accepted Answer · answered Mar 18 '13 at 07:45

2

The onSearchSucceeded and onUpdateSucceeded functions seem correct to me. It is inside those functions that you are telling the jQuery unobtrusive framework that new DOM elements are present in the result div and need to be registered.

What troubled me is the following comment in your code:

// This form gets submitted through javascript after a blur on quantity textfield

Unfortunately you haven't exactly shown how this is done, but the following code worked fine for me:

$(document).on('blur', 'form[id^="form-"] input[name$="Quantity"]', function () {
    $(this).closest('form').submit();
});

answered Mar 18 '13 at 07:45

Darin Dimitrov

1,023,142
271
3,287
2,928

Thanks for the answer, I updated my question and added the code that submits the form, I don't think there is a problem with it – aryaxt Mar 18 '13 at 15:03
Well, actually there's a problem. You didn't subscribe to the .blur event in a *lively* manner, meaning that after the first AJAX call your blur event no longer works. Look in my example. I have used the `.on()` method to subscribe to it meaning that even if the element doesn't exist yet or gets updated in the DOM, the blur event will be automatically attached to it. – Darin Dimitrov Mar 18 '13 at 17:00
That was the problem thanks, can you please add that to your answer so that I can accept it? Thanks – aryaxt Mar 18 '13 at 17:56
I have already shown the correct way to register your `blur` event using the `.on` method in my answer and do not think that it requires any more editing. – Darin Dimitrov Mar 18 '13 at 21:27

ASP.Net MVC - Client side validation breaks after a partial refresh?

1 Answers1