Bootstrap and jQuery Validation in dynamic form not working

Question

I have a page which is created using bootstrap CSS which has a button on it like this one.

<div class="col-sm-4 m-b-xs">
    <a data-title="New customer" class="btn btn-primary btn-outline btn-sm modalLink" href="/Registry/CustomerCreatePartial">
        <i class="fa fa-plus"></i>&nbsp;&nbsp;Add customer
    </a>
</div>

When the user click on the button jQuery handler is executed which in turn calls another javascript function

(function ($) {
    $('a.modalLink').on('click', function (event) {
        event.preventDefault();
        var url = $(this).attr('href');
        var title = $(this).attr('data-title');
        CreateModalDialog(url, title, 'Cancel', 'Save');
    });
})(jQuery);

The code is like the following:

function CreateModalDialog(url, title, cancelText, submitText) {
    var modal = $('#myModal');
    modal.on('show.bs.modal', function (event) {
        var theModal = $(this);

        // Get the form from the server.
        $.get(url, function (data) {
            //Add the form to the modal body 
            theModal.find('.modal-body').html(data);
        });

        //wire up form validation
        theModal.find('form').validate();

        //set up form submission
        var okButton = theModal.find('.modal-footer button.buttonSave');
        okButton.on('click', function (event) {
            //submit the form
            theModal.find('form').submit();
        });
    });

    // wire up the actual modal functionality and show the dialog
    modal.modal({                    
        "backdrop": "static",
        "keyboard": true,
        "show": true
    });
}

Unfortunately the validation does not occurs and the form get submitted.

My controls on the form uses data-val-* attribute validation like in the following example.

<input type="text" value="" name="Zip" id="Zip" 
       data-val-required="Field required" 
       data-val-length-min="5" data-val-length-max="5" 
       data-val-length="Zip field should be 5 characters long"
       data-val="true" class="form-control">

Where do I am wrong?

EDIT:

I am not using jQuery Unobtrusive validation at all. Just pure jQuery Validate plugin. Just noted that the default HTML extensions generates markup like the one I have added above with attributes like data-val-* and data-msg-*. I have aldo noted that jQuery Validation search for data-rule-* and data-msg-*. It could be this one the cause of the problems I am experiencing?

Bring up the developer tools inside your browser (F12 usually) and see if your jQuery is failing. — Mathemats, Apr 20 '15 at 23:52
Please create a more complete demo. Otherwise, it looks like there is nothing wrong with what you've shown us so far. Why is question tagged `c#`? What does that have to do with JavaScript? — Sparky, Apr 21 '15 at 00:08
[You can also put `debug: true` inside the `.validate()` method](http://jqueryvalidation.org/validate/#debug) to see if there's anything useful it tells you via the console log. — Sparky, Apr 21 '15 at 00:10
Thanks for the hint. I have updated the question adding more details. C# is there because this is an ASP.NET MVC application. However no info from debug option — Lorenzo, Apr 21 '15 at 00:16
Since the operation of JavaScript does not care about your server framework, it does not seem relevant. However, if you're using ASP, make sure you're NOT using the unobtrusive validation plugin. Otherwise, it will interfere with your ability to call the `.validate()` method yourself. — Sparky, Apr 21 '15 at 03:42
I'm running into (what I think is) the same problem. It has to deal with the unobtrusive validation script parsing the DOM for validation rules when it initializes. So your AJAX loaded content isn't parsed, because it doesn't exist in the DOM at the time that the unobtrusive validation initializes. Calling `$.validator.unobtrusive.parse()` to reparse the DOM is the common answer I've found to solve this, however it isn't working for me. When I find a solution I'll post it. — RJ Cuthbertson, Apr 28 '15 at 20:47
@RJCuthbertson: have a look at my answer for the solution I have found. — Lorenzo, Apr 29 '15 at 17:11
I got it to work with this answer: http://stackoverflow.com/a/14982495/1197771 The part I was missing was removing the unobtrusive validation data as well as the regular jQuery Validation data. — RJ Cuthbertson, May 04 '15 at 15:20

score 0 · Accepted Answer · answered Apr 29 '15 at 17:10

I have ended up with using the jQuery.Validation.Unobtrusive.Native package available here.

This package is very nice and by using it I have been able to generate unobtrusive validation code which works perfectly with jQuery Validation because the generated markup is much more standard like

<input data-msg-number="The field TextBox must be a number." 
                data-msg-required="The TextBox field is required." 
                data-rule-number="true" 
                data-rule-required="true" 
                id="TextBox" name="TextBox" type="text" value="" />

Bootstrap and jQuery Validation in dynamic form not working

1 Answers1