Question

我设计了一个带有jquery验证插件的表单。我想在出现错误消息时更改输入边框颜色。

＆＃13;

 $("#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"
  }
 });

＆＃13;

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

＆＃13;

<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>

＆＃13;

我发现我应该为此添加一个课程，但我不知道如何编码。我对jquery完全陌生。请帮帮我。感谢。

Answer 1

Jquery Validate默认使用以下元素规则。 .error表示错误，.valid表示有效值。

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

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

jquery表单验证插件在发生错误时将类添加到输入

1 个答案: