Javascript 无法在Jquery UI垂直选项卡内执行验证

我试图在Jquery选项卡内的表单上执行简单的验证。但是当选择带有空值的表单时，页面只会刷新，但不会显示验证。请告诉我哪里出了问题

 <link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery- ui.css">
      <script src="//code.jquery.com/jquery-1.9.1.js"></script>
      <script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
      <link rel="stylesheet" href="/resources/demos/style.css">
       <script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>


    //Jquery script 

    <script>
    $(function() {
    $( "#tabs" ).tabs().addClass( "ui-tabs-vertical ui-helper-clearfix" );
    $( "#tabs li" ).removeClass( "ui-corner-top" ).addClass( "ui-corner-left" );
    $( "#tabs" ).tabs();


    });




   </script>
     <script>
      $(function() {
      $("#register-form").validate({


        rules: {
            firstname: "required",
            lastname: "required",
            email: {
                required: true,
                email: true
            },
            password: {
                required: true,
                minlength: 5
            },
            agree: "required"
        },


        messages: {
            firstname: "Please enter your first name",
            lastname: "Please enter your last name",
            password: {
                required: "Please provide a password",
                minlength: "Your password must be at least 5 characters long"
            },
            email: "Please enter a valid email address",
            agree: "Please accept our policy"
        },

        submitHandler: function(form) {
            form.submit();
        }
    });
      });
  </script>


      <style>
      .ui-tabs-vertical { width: 55em; }
        .ui-tabs-vertical .ui-tabs-nav { padding: .2em .1em .2em .2em; float: left; width: 12em; }
         .ui-tabs-vertical .ui-tabs-nav li { clear: left; width: 100%; border-bottom-width: 1px !important; border-right-width: 0 !important; margin: 0 -1px .2em 0; }
        .ui-tabs-vertical .ui-tabs-nav li a { display:block; }
         .ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active { padding-bottom: 0; padding-   right: .1em; border-right-width: 1px; border-right-width: 1px; }
         .ui-tabs-vertical .ui-tabs-panel { padding: 1em; float: right; width: 40em;}
         .ui-widget {font-size: 1.1em;}
         </style>

       </head>


     <div id="tabs">
      <ul>

      <li><a href="#tabs-1">Guest</a></li>

       </ul>


        <div id="tabs-3"  >
        <h1>Register here</h1>

          <!--  The form that will be parsed by jQuery before submit  -->
         <form action="" method="post" id="register-form" novalidate="novalidate">

          <input type="text" id="firstname" name="firstname" /><br />
           <input type="text" id="lastname" name="lastname" /><br />
          <input type="text" id="email" name="email" /><br />
          <input type="password" id="password" name="password" /><br />
          <input type="submit" name="submit" value="Submit" /></div>

        </form>


        </div>

       </div>

       </body>
       </html>

//Jquery脚本
$（函数（）{
$（“#制表符”）.tabs（）.addClass（“ui制表符垂直ui辅助程序clearfix”）；
$（“#tabs li”）.removeClass（“ui角顶部”）.addClass（“ui角左侧”）；
$（“#制表符”）.tabs（）；
});
$（函数（）{
$（“#登记表”）。验证({
规则：{
名字：“必选”，
姓氏：“必需”，
电邮：{
要求：正确，
电子邮件：真的
},
密码：{
要求：正确，
最小长度：5
},
同意：“必需”
},
信息：{
名字：“请输入您的名字”，
姓氏：“请输入您的姓氏”，
密码：{
必填：“请提供密码”，
minlength:“您的密码长度必须至少为5个字符”
},
电子邮件：“请输入有效的电子邮件地址”，
同意：“请接受我们的政策”
},
submitHandler:函数（表单）{
表单提交（）；
}
});
});
.ui选项卡垂直{宽度：55em；}
.ui制表符垂直.ui制表符导航{填充：.2em.1em.2em.2em；浮动：左；宽度：12em；}
.ui选项卡垂直.ui选项卡导航{清除：左侧；宽度：100%；边框底部宽度：1px！重要；边框右侧宽度：0！重要；边距：0-1px.2em 0；}
.ui选项卡垂直.ui选项卡导航{显示：块；}
.ui选项卡垂直.ui选项卡导航li.ui-tabs-active{填充底部：0；填充-右侧：.1em；右边框宽度：1px；右边框宽度：1px；}
.ui选项卡垂直.ui选项卡面板{填充：1em；浮动：右侧；宽度：40em；}
.ui小部件{字体大小：1.1em；}



在这里注册

将示例扩展到我上面的评论

$(document).ready(function () {

    $("input[type='submit'][name='submit']").click(function (e) {
        e.preventDefault();
       var $regForm=  $("#register-form"); 
       $regForm.validate();

        if ($regForm.valid()) {
         $regForm.submit();
        }
    });
});

---

无法再现错误。浏览器控制台F12中是否有错误？Hi刚刚尝试使用JSFIDLE似乎工作正常，但当使用Netbeans运行它时，它不会显示在chrome浏览器中。仍在查看它。感谢您让我知道代码中没有iusse。所以问题不在jquery中。尽管您可以做的是，在submit按钮上挂起一个事件并防止默认提交。检查表格是否有效，提交表格。请参见答案中的示例。这可能会防止表单提交受到其他内容的干扰。