JQuery製作表单验证Vaildation

使用Bootstrap框架，拉出HTML表单的皮

<div class="container">  <form>    <h2>Contact Us</h2>    <div class="row">      <div class="col-md-6">        <div class="form-group">          <label for="first">First Name</label>          <input type="text" class="form-control required" placeholder="" id="first">        </div>      </div>      <div class="col-md-6">        <div class="form-group">          <label for="last">Last Name</label>          <input type="text" class="form-control required" placeholder="" id="last">        </div>      </div>    </div>    <div class="row">      <div class="col-md-6">        <div class="form-group">          <label for="phone">Phone Number</label>          <input type="tel" class="form-control required" id="phone" placeholder="phone">        </div>      </div>       <div class="col-md-6">        <div class="form-group">          <label for="email">Email</label>          <input type="email" class="form-control required" id="email" placeholder="email">        </div>      </div>    </div>    <button type="submit" class="btn btn-primary">Submit</button>  </form></div>

透过val()方法取得value属性值，用条件判断是否为空值

$('.required').on('keydown keyup keypress change focus blur',function(){  if($(this).val() == ''){    $(this).css({backgroundColor: '#ffcccc'});  }else{    $(this).css({backgroundColor: '#fff'});  }}).change();

範例网址
https://codepen.io/amanda328/pen/dqXGZB?editors=0010

以上为个人学习纪录
参考书籍为外挂OUT!JQuery高手精技