jquery validation error messages using bootstrap does't work properly

Question

I have developed following code to display tool tip like error messages on validating form. Only after validate this form should be able to view next form.

<script>
 $(document).ready(function(){

    $("#btn1").click(function(){

            $("#form1").validate({

                rules: {
                    firstname: {
                        required: true,

                    },
                    lastname: {
                        required: true,

                    },
                    email: {
                        required: true,

                    }

                },
                tooltip_options: {
               firstname: { 
                  placement: 'right' 
                  },
                  lastname: { 
                  placement: 'right' 
                  },
                  email: { 
                  placement: 'right' 
                  }
                }
            });

        if ($("#form1").valid() == true){
                document.getElementById('form2_container').style.display = "block";
                   document.getElementById('form2_container').scrollIntoView();


            }   

        });
        // JavaScript Document
    });
    </script>

But next form suddenly displayed and it disappears. What would be the issue?

score 0 · Accepted Answer · edited May 23 '17 at 11:50

What would be the issue?

You've probably broken the plugin with invalid options. Although you have not shown your HTML, so there might be other issues with your markup.

<script>
    $(document).ready(function(){

        $("#btn1").click(function(){

            $("#form1").validate({
                rules: {
                    firstname: {
                        required: true,
                    },
                    lastname: {
                        required: true,
                    },
                    email: {
                        required: true,
                    }
                },
                tooltip_options: { // <- no such option for this plugin
                firstname: { 
                  placement: 'right' 
                  },
                  lastname: { 
                  placement: 'right' 
                  },
                  email: { 
                  placement: 'right' 
                  }
                }
            });  // <- close '.validate()'

            if ($("#form1").valid() == true){
                document.getElementById('form2_container').style.display = "block";
                   document.getElementById('form2_container').scrollIntoView()
            }   

        }); // <- close click handler

    }); // <- close DOM ready handler
</script>

You can only put an object literal inside the .validate() method that is constructed as per the plugin's author. You cannot use non-existant options inside .validate(). In other words, tooltip_options is not a valid option for the jQuery Validate plugin.
You cannot put .validate() inside of a click handler. The .validate() method is only used for initializing the plugin on your form and therefore only belongs inside of a DOM ready event handler. Once initialized, it automatically captures the click of the submit button.

I suggest that you review the documentation and the SO Tag Wiki page for proper construction, helpful tips and example code.

Integrating tool-tips into this plugin is not as simple as you may think.

BTW:

if ($("#form1").valid() == true){....

would be identical to...

if ($("#form1").valid()){....

I use another plugin along with jquery https://github.com/Thrilleratplay/jquery-validation-bootstrap-tooltip — hogard, Feb 21 '15 at 17:23
I think somehow triggering form reset. Any ways to stop resetting form explicitly? — hogard, Feb 21 '15 at 17:38
ok got it. Its a html error. Need to change input type to button since this is a multiple step form. Thanks — hogard, Feb 21 '15 at 17:42

jquery validation error messages using bootstrap does't work properly

1 Answers1