使用bootstrap的jquery驗證錯誤消息無法正常工作

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>

1. 您只能將對象文字放在根據插件的作者構造的.validate()方法中 。 你不能在.validate()使用不存在的選項。 換句話說， tooltip_options不是jQuery Validate插件的有效選項。

2. 您不能在click處理程序中放置.validate() 。 .validate()方法僅用於初始化表單上的插件，因此只屬於DOM ready事件處理程序。 初始化后，它會自動捕獲submit按鈕的單擊。

我建議您查看文檔和SO Tag Wiki頁面，以獲得正確的構造，有用的提示和示例代碼。

將工具提示集成到此插件中並不像您想象的那么簡單 。

---

BTW：

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

會與 ...... 相同

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