jquery 使用 bootstrap 的验证错误消息无法正常工作

Question

我开发了以下代码来显示工具提示，例如验证表单上的错误消息。只有在验证此表单后才能查看下一个表单。

<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>

但是下一个表格突然显示，然后消失了。会是什么问题？

Answer 1

What would be the issue?

您可能使用无效选项破坏了插件。虽然您没有显示您的 HTML，因此您的标记可能存在其他问题。

<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>

你只能放an object literal inside the .validate() method that is constructed as per the plugin's author。您不能在 .validate() 中使用不存在的选项。换句话说，tooltip_options 不是 jQuery 验证插件的有效选项。
您不能将 .validate() 放在 click 处理程序中。 .validate() 方法仅用于 初始化 表单上的插件，因此仅属于 DOM 就绪事件处理程序。初始化后，它自动捕获 submit 按钮的点击。

我建议您查看 the documentation and the SO Tag Wiki page 以获得正确的构造、有用的提示和示例代码。

将工具提示集成到此插件中是 not as simple as you may think。

顺便说一句：

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

与...相同...

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

jquery 使用 bootstrap 的验证错误消息无法正常工作

jquery validation error messages using bootstrap does't work properly

jquery

jquery-validate

twitter-bootstrap