jQueryのプラグインを使用して検証

Question

[UPDATED]

私は簡単なフォームを検証するためにjQueryの検証プラグインを使用しています。

<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スクリプト： それは、フォームのHTMLです

<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

は、正しいメール検証メッセージ

代わりContactFormSubjectの

<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 whith試してみてください：

使用 "必要"：

<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: { 
       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" 
     } 
    } 
});