8

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');
    });
ARC
  • 1,061
  • 14
  • 33
  • Are you dynamically loading the form in the popup (e.g. using ajax?) –  Aug 02 '15 at 05:48
  • 1
    @StephenMuecke yes i am using ajax – ARC Aug 02 '15 at 05:54
  • You need to reparse the validator. You need to show your script in order to give an answer (edit the question to include it). –  Aug 02 '15 at 05:55

1 Answers1

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.

  • Whats the difference between this JS code and this? https://stackoverflow.com/questions/7839453/steve-sandersons-begincollectionitem-not-working-in-all-cases-potential-solu/7841735#7841735 – markzzz Jul 23 '18 at 07:16
  • 1
    @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()](https://api.jquery.com/jQuery.removeData/) where as the 2nd sets it to `null` using [.data()](https://api.jquery.com/jQuery.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 :) –  Jul 23 '18 at 10:50