jqueryフォーム検証プラグインエラーが発生したときに入力にクラスを追加します

Question

jquery検証プラグインでフォームを設計しました。エラーメッセージが表示されたら、入力枠の色を変更したいと思っていました。

$("#commentForm").validate({ 
 
    rules: { 
 
    user: { 
 
     required:true 
 
    }, 
 
    mail: { 
 
     required: true, 
 
     email: true 
 
    }, 
 
    secret: { 
 
     required:true, 
 
     minlength:6, 
 
     maxlength:6 
 
    }, 
 
    mobile: { 
 
     digits:true, 
 
     required:true, 
 
     minlength:10, 
 
     maxlength:10 
 
    }, 
 
    address: { 
 
     required:true, 
 
     url:true 
 
    }, 
 
    'choose': { 
 
     required:true 
 
    } 
 
    }, 
 

 
//message// 
 

 
    messages: { 
 
    user: "Please enter your name", 
 
    mail: "Please enter your email", 
 
    secret: "Enter password with min & max length of 6", 
 
    mobile: "Enter mobile number in number format", 
 
    address: "Enter mobile number in number format", 
 
    choose: "Please select your Age" 
 
    } 
 
});

.panel-body{ 
 
\t background-color:rgba(0,0,128,0.1); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script> 
 
<div class="container" style="margin-top:10px"> 
 
<div class="row"> 
 
    <div class="col-sm-offset-3 col-sm-6"> 
 
     <div class="panel panel-primary"> 
 
      <div class="panel-heading text-center"> 
 
      <h3>Jquery Form Validation</h3> 
 
      </div> 
 
      <div class="panel-body"> 
 
      <form id="commentForm" name="" class="form-horizontal" id="Vform" method="POST" action="trail.html" > 
 
       <div class="col-sm-12 form-group"> 
 
        <label class="col-sm-4" for="user">Username*</label> 
 
        <input class="col-sm-8" name="user" type="text" class="form-control" placeholder="Enter Your Name"> 
 
       </div> 
 
       <div class="col-sm-12 form-group"> 
 
        <label class="col-sm-4" for="secret">Password</label> 
 
        <input class="col-sm-8" name="secret" type="password" class="form-control" placeholder="Enter Your Password"> 
 
       </div> 
 
       <div class="col-sm-12 form-group"> 
 
        <label class="col-sm-4" for="mobile">Mobile*</label> 
 
        <input class="col-sm-8" name="mobile" type="text" class="form-control" placeholder="Enter Mobile Number"> 
 
       </div> 
 
       <div class="col-sm-12 form-group"> 
 
        <label class="col-sm-4" for="mail">Email</label> 
 
        <input class="col-sm-8" name="mail" type="email" class="form-control" placeholder="Enter Your Email" > 
 
       </div> 
 
       <div class="col-sm-12 form-group"> 
 
        <label class="col-sm-4" for="address">Url</label> 
 
        <input class="col-sm-8" name="address" type="text" class="form-control" placeholder="Enter Your Email"> 
 
       </div> 
 
       <div class="col-sm-12 form-group"> 
 
        <label class="col-sm-4" for="choose">Age</label> 
 
        <select class="col-sm-8" name="choose" style="padding: 4px;" class="form-control"> 
 
         <option value="" >Choose</option> 
 
         <option value="Above18">Above 18</option> 
 
         <option value="Below18">Below 18</option> 
 
        </select> 
 
       </div> 
 
       <!--submit button--> 
 
       <div> 
 
        <center><button class="btn btn-success" type="submit" >SUBMIT</button></center> 
 
       </div> 
 
      </form> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div> 
 
</div>

私はそのためのクラスを追加する必要がありますが、私はコーディングする方法を知らないことを考え出しました。私はjqueryにとって全く新しいです。私を助けてください。ありがとう。

Answer 1

Jquery Validate defaultは、要素に対して次の規則を使用します。エラーの場合は.error、有効な値の場合は.validです。

.error { 
    border: 2px solid #f00; 
} 

.valid { 
    border: 2px solid #0ff; 
}