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

Question

我试图在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>

Answer 1

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

$(document).ready(function () {

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

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