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

Are you dynamically loading the form in the popup (e.g. using ajax?) — user3559349
– user3559349, Commented Aug 2, 2015 at 5:48
You need to reparse the validator. You need to show your script in order to give an answer (edit the question to include it). — user3559349
– user3559349, Commented Aug 2, 2015 at 5:55

user3559349 · Accepted Answer · 2015-08-02 06:05:19Z

15

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.

answered Aug 2, 2015 at 6:05

user3559349

Sign up to request clarification or add additional context in comments.

2 Comments

markzzz Over a year ago

Whats the difference between this JS code and this? stackoverflow.com/questions/7839453/…

user3559349 Over a year ago

@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 :)

Collectives™ on Stack Overflow

Required field validations not working in JQuery Popup MVC 4

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related