使用JQuery驗證插件

Question

[增訂]

我使用JQuery驗證插件來驗證一個簡單的表格。 它的HTML表單：

<form id="commentForm"> 
<div id="ContactUsDIV"> 
    <div id="right"> 
     <div class="ContactFormInput">Subject:</div> 
     <input id="ContactFormSubject" name="ContactFormSubject" type="text" class="input"/> 
     <label for="ContactFormSubject" class="validationMessage"></label> 

     <div class="ContactFormInput">Full Name:</div> 
     <input id="FullName" name="FullName" type="text" class="input"/> 
     <label for="FullName" class="validationMessage"></label> 

     <div class="ContactFormInput">EMail:</div> 
     <input id="EmailAddress" name="EmailAddress" type="text" class="inputLTR"/> 
     <label for="EmailAddress" class="validationMessage"></label> 

     <div> 
      <input id="SendMessage" type="submit" value="Send" class="ContactFormSubmit"/> 
     </div> 
    </div> 
    <div id="left"> 
     <div class="ContactFormInput">Message:</div> 
     <textarea id="UserComment" cols="20" rows="2"></textarea> 
     <label for="UserComment" class="validationMessage"></label> 
    </div> 

</div> 
</form> 

Java腳本：

<script type="text/javascript"> 
    $.validator.setDefaults({ 
     submitHandler: function() { alert("submitted!"); } 
    }); 

    $().ready(function() { 

     // validate signup form on keyup and submit 
     $("#commentForm").validate({ 
      rules: { 
       ContactFormSubject: "required", 
       FullName: "required", 
       username: "required", 
       EmailAddress: { 
        required: true, 
        email: true 
       }, 
       UserComment: "required" 
      }, 
      messages: { 
       ContactFormSubject: "blah blah", 
       FullName: "blah blah", 
       username: "blah blah", 
       email: "blah blah", 
       UserComment:"blah blah" 
      } 
     }); 

    }); 
</script> 

但是當我點擊發送按鈕，沒有任何反應。

可在這裏：http://tinkerbin.com/wRh09opb

Answer 1

試試這個正確的電子郵件驗證消息

<script type="text/javascript"> 
    $.validator.setDefaults({ 
     submitHandler: function() { alert("submitted!"); } 
    }); 

    $(document).ready(function() { 

     // validate signup form on keyup and submit 
     $("#commentForm").validate({ 
      rules: { 
       ContactFormSubject: "required", 
       FullName: "required", 
       username: "required", 
       EmailAddress: { 
        required: true, 
        email: true 
       }, 
       UserComment: "required" 
      }, 
      messages: { 
       ContactFormSubject: "blah blah", 
       FullName: "blah blah", 
       username: "blah blah", 
       EmailAddress: {required:"blah blah", email:"blah blah"}, 
       UserComment:"blah blah" 
      } 
     }); 

    }); 
</script> 

Answer 2

嘗試蒙山此Javascript：

<script type="text/javascript"> 
    $.validator.setDefaults({ 
     submitHandler: function() { alert("submitted!"); } 
    }); 

    $.ready(function() { 

     // validate signup form on keyup and submit 
     $("#commentForm").validate({ 
      rules: { 
       ContactFormSubject: "required", 
       FullName: "required", 
       username: "required", 
       EmailAddress: { 
        required: true, 
        email: true 
       }, 
       UserComment: "required" 
      }, 
      messages: { 
       ContactFormSubject: "blah blah", 
       FullName: "blah blah", 
       username: "blah blah", 
       email: "blah blah", 
       UserComment:"blah blah" 
      } 
     }); 

    }); 
</script> 

Answer 3

相反ContactFormSubject的： 「需要」

使用像這樣

個

規則：

ContactFormSubject: { 
       required: true } 

消息：

ContactFormSubject: { required : "Please fill the field" } 

樣品：

$("#AdditionalDetailsForm").validate({ 
    rules: { 
     ignore: ":not(:visible)", 
     Account_Number: { 
      required: true 
     }, 
     BaseJurisdiction: { 
      required: true 
     } 
    }, 
    messages: { 
     Account_Number: { 
      required: "<br/> Please enter the field" 
     }, 
     BaseJurisdiction: { 
      required: "<br/> Please enter the field" 
     } 
    } 
});