Required field validations not working in JQuery Popup MVC 4

Question

I have JQuery popups and i want to put required field validations on it and for this i have set required attributes in model and have also set the validation message for them in the view but that required field validations are not working on popups. Required field validation is working fine on forms other than JQuery Popups....Please guide me that what should i do to tackle this issue...Following is my code.

Model

[Display(Name = "Material Code")]
[Required(ErrorMessage = "*")]
public string MaterialCode { get; set; }

View

<li>
    @Html.LabelFor(m => m.MaterialCode)
    @Html.TextBoxFor(m => m.MaterialCode)
    @Html.HiddenFor(m => m.MaterialCodeId)
</li>

and following is my cod eto open a JQuery popup.

$('#btnAddCharge').on('click', function (event) {  
        event.preventDefault();
        var actionURL = '@Url.Action("Edit", "Charges", new { Id = 0, @ticketId = @TicketId, UserId = UserId })';

        $(dialogBox).dialog({
            autoOpen: false,
            resizable: false,
            title: 'Edit',
            modal: true,
            show: "blind",
            width: 'auto',
            hide: "blind",
            open: function (event, ui) {
                $(this).load(actionURL, function (html) {
                    $('form', html).submit(function () {
                        $.ajax({
                            url: this.action,
                            type: this.method,
                            data: $(this).serialize(),
                            success: function (res) {
                                if (res.success) {
                                    $(dialogBox).dialog('close');
                                }
                            }
                        });
                        return false;
                    });
                });
            }
        });

        $(dialogBox).dialog('open');
    });

Professional

Are you dynamically loading the form in the popup (e.g. using ajax?) – Tandy

@StephenMuecke yes i am using ajax – Professional

You need to reparse the validator. You need to show your script in order to give an answer (edit the question to include it). – Tandy

Answer 1

The validator is parsed when the page is initially loaded. When you add dynamic content you need to reparse the validator. Modify your script to include the following lines after the content is loaded

$(this).load(actionURL, function (html) {
    // Reparse the validator
    var form = $('form');
    form.data('validator', null);
    $.validator.unobtrusive.parse(form);
    $('form', html).submit(function () {
        ....

Side note: The code you have shown does not include @Html.ValidationMessageFor(m => m.MaterialCode) but I assume this is included.

Tandy

Whats the difference between this JS code and this? #7839953 – Miracidium

@markzzz, $("form").removeData("validator"); is essentially the same as form.data('validator', null); in this context. The 1st removes the previously added validator using .removeData() where as the 2nd sets it to null using .data(). The $("form").removeData("unobtrusiveValidation"); in the other answer is not really necessary because the $.validator.unobtrusive.parse(form); effectively resets that anyway. (and that reminds me I am going to add an answer on one of your questions from a few days ago :) – Tandy