jquery validation valid() always returns true and form's novalidate="novalidate" property is not created

Question

I am using jquery.validate v1.14.0 by Jörn Zaefferer

<script src="~/lib/jquery-validation/dist/jquery.validate.js"></script>
<script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.js"></script>

I have a project which all the validation worked correctly. When a required fields wasn't populated the client side validation would pick it up before the form was sumitted.

However I moved all these forms to boostrap modals and a page's form gets loaded dynamically inside the modal via an ajax call. After this change my client side validation never fires and I also notice the validation plugin doesn't add the tag novalidate="novalidate" to the form like it did before.

Here is my code simplified

I then use the following jquery as I'd like to catch all form submits and do some additional logic:

   $(document).on('submit', '.formDetail', function (e) { 

        e.preventDefault();

        //added this to see if it would throw error but it doesn't
        var form = $(".formDetail");
        form.validate();

         //this is always true
         if ($(this).valid()) {


            $.ajax({
                processData: false,
                contentType: false,
                data: new FormData(this),
                type: $(this).attr('method'),
                url: $(this).attr('action'),
                success: function (data) {
                   //other logic
                 }
            }); 
         }
    });

If String1 is left blank and I submit and step through the javascript console '($(this).valid())' is alwasy true. If I change it to ($(".formDetail").valid()) the result is same i.e. always true.

It also doesn't show the error message on screen before the HTTP POST like it did before I switched to dynamic ajax modal forms.

How do I get valid() to work. There are no javascript error in my console when stepping through the code and valid() is always true which makes me no what causes validation to always be successful. If the jquery validation plugin was not found I would surely get a javascript console error but I'm not.

I tried manually adding the novalidate=novalidate tag to the form but this doesn't help.I think the fact that this doesn't get populated tells me something is not right. You can see in my code I did try to force the validate() but this didn't make a difference.

Answer 1

Try this

$(document).on('submit', '.formDetail', function (e) { 
    e.preventDefault();
    $(this).removeData("validator").removeData("unobtrusiveValidation");//remove the form validation
    $.validator.unobtrusive.parse($(this));//add the form validation

    if ($(this).valid()) {
        $.ajax({
            processData: false,
            contentType: false,
            data: new FormData(this),
            type: $(this).attr('method'),
            url: $(this).attr('action'),
            success: function (data) {
               //other logic
             }
        }); 
     }
});