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