驗證表單不起作用

Question

我的表單驗證不會觸發......如果我嘗試提交此表單而不輸入任何內容，那麼它應該驗證，但在這種情況下它確實接受表單。

<script src="Scripts/jquery-1.4.4.min.js" type="text/javascript"></script> 
<script src="Scripts/jquery.validate.min.js" type="text/javascript"></script> 

<script> 
    $(document).ready(function() { 
     $("#register").click(function (event) { 
      // validate the comment form when it is submitted 
      // validate signup form on keyup and submit 
      $("#form1").validate({ 
       rules: { 
        firstname: "required", 
        lastname: "required", 
        //city: "required", 
        state: "required", 
        country: "required" 
       }, 
       messages: { 
        firstname: "Please enter your firstname", 
        lastname: "Please enter your lastname", 
        //city: "Please enter a valid email address", 
        country: "Please select your country" 
       } 
      }); 
      $("#form1").validate({ 
       submitHandler: PostData 
      }); 


      function PostData() { 

       $.ajax(url, { Id: '1' }, 
         function (data, textStatus) { 
          //alert(textStatus); 
         }); 
      } 

     }); 
    }); 
</script> 
<div id="content-main"> 
    <div class="main-inner"> 
     <form id="form1" class="toolTip hasCorners" name="form1" action="http://site.com/" 
     onsubmit="return false;" method="post"> 
     <fieldset> 
      <div class="fontWeight7"> 
       <input type="radio" value="1" name="pledge_level" class="required"> 
       <p class="radioText"> 
        Iam on vacation.</p> 
       <label for="level1" class="error"> 
        Please select</label> 
      </div> 
      <p class="required-msg"> 
       All fields below are required</p> 
      <div class="subColumns paragraph"> 
       <div class="lefty"> 
        <div class="fontWeight7"> 
         <label for="first_name"> 
          First Name:</label> 
         <input id="first_name" class="text hasCorners required" name="first_name" type="text" 
          maxlength="200" value=""> 
         <label for="level1" class="error"> 
          Please enter your name!</label> 
        </div> 
       </div> 
       <div class="cdc-left"> 
        <div class="fontWeight7"> 
         <label for="last_initial"> 
          Last Initial:</label> 
         <input id="last_initial" class="text hasCorners required" name="last_initial" type="text" 
          maxlength="200" value=""> 
         <label for="level2" class="error"> 
          Please enter your last initial!</label> 
        </div> 
        <rest of the code here .... > 
       </div> 
      </div> 

<input id="register" name="register" value="Submit Your form" 
            type="submit"> 

Answer 1

.validate應該在文檔準備就緒後完成，而不是點擊按鈕。所以從那裏拿出來。

例如

$(document).ready(function() { 
    $("#form1").validate({ 
      rules: { 
       firstname: "required", 
       lastname: "required", 
       //city: "required", 
       state: "required", 
       country: "required" 
      }, 
      messages: { 
       firstname: "Please enter your firstname", 
       lastname: "Please enter your lastname", 
       //city: "Please enter a valid email address", 
       country: "Please select your country" 
      }, 
      submitHandler: PostData 
     }); 
    }); 
}); 

function PostData() { 
    $.ajax(url, 
      { Id: '1' }, 
      function (data, textStatus) { 
       //alert(textStatus); 
      }); 
} 

HTHS，
查爾斯