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.

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

Solution 2

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.

The novalidate attribute simply turns off the browser's built-in HTML5 validation; it has nothing to do with making the plugin work. This attribute is added dynamically when the jQuery Validate plugin is properly initialized so that you don't have HTML5 validation along with jQuery Validate. Trying to manually add/remove novalidate will have no bearing on the operation of the jQuery Validate plugin.

---

This is all wrong...

$(".formDetail").submit(function (e) {

    e.preventDefault();

    var form = $(".formDetail");
    form.validate();

     if ($(this).valid()) {

        $.ajax({ ....

• The .validate() method is how the plugin is initialized. In other words, you would not initialize it inside of the submit or click handler. The click of the submit is captured automatically by the plugin, so you would only enclose the .validate() method inside of the DOM ready handler.

• The .valid() method only works after the plugin is initialized.

• As per documentation, any ajax used for submitting the form would go inside the submitHandler callback function.

  $(document).ready(function() {
  
      $(".formDetail").validate({
          submitHandler: function(form) { // fires only when form is valid
              // your ajax here
              $.ajax({ .... });
              return false;
          }
      });
  
      if ($(".formDetail").valid()) { 
          // this will work now, but you probably wouldn't need it anymore
          // since your ajax is is placed where it belongs.
      });
  
      ....
  

Please see the Tag Wiki page for basic setup and usage.

---

I moved all these forms to bootstrap modals and a page's form gets loaded dynamically inside the modal via an ajax call.

The jQuery Validate plugin can only be initialized on these forms after they exist in the DOM.

1. Create/Load the form in the DOM.

2. Attach/Call .validate() on the form.

3. Form is ready to automatically validate data input.

---

NOTE:

If you're also using Microsoft's Unobtrusive Validation plugin, then the .validate() method is constructed and called automatically and the rules are declared based on the inline HTML attributes. Since the .validate() method is handled by the Unobtrusive Validation plugin, then you cannot call .validate() again as these subsequent calls are always ignored.

Comments

[dfmetro]

Thanks for you detailed answer. I do prefer your jquery handler method. However it doesn't get hit if I put a breakpoint on it. The solution below by adding the the line $.validator.unobtrusive.parse($(this)); to the start of on submit handler does fix my problem.

[Sparky]

@devc2, the "NOTE" at the end of my answer explains exactly why that did not work for you.

[Supreme Dolphin]

Can you please explain why this works? I have tried applying the same exact solution and it doesn't work for me.

[ZeRemz]

This is the only thing that worked for me, but I'd love to know why it did. JQuery validation has always worked smoothly in the past, so I'd like to understand what's different about the project I'm currently working on (which in every other aspect is pretty much your standard out-of-the-box ASP MVC5 project)