使用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高手精技