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