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

会出现什么问题？

您可能已使用无效选项破坏了该插件。虽然您没有显示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插件的有效选项。
您不能将.validate()放在click处理程序中。 .validate()方法仅用于 初始化 表单上的插件，因此只属于DOM ready事件处理程序。初始化后，会自动捕获submit按钮的点击。

我建议您查看the documentation和the SO Tag Wiki page，了解正确的构造，有用的提示和示例代码。

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

顺便说一句：

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

与相同到......

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

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

1 个答案: