與輸入顏色jQuery的表單驗證

Question

我想驗證空輸入字段使用jQuery，只是喜歡這個網站vk.com

當您提交此網站上的表格，我喜歡的效果上，輸入變得紅了一下並逐漸獲得其初始顏色。你可以看這個自己

Here is video of this validation

Answer 1

您可以使用Jquery和提交補充error 1日後第二刪除類。

對於過渡效果，您可以使用css3背景顏色過渡到error類。

例如，請參考下面的代碼。

$(document).ready(function() { 
 
    $("#login_button").click(function() { 
 
    var phoneEmail = $("#phone_email"); 
 
    if(!phoneEmail.val()) { 
 
     phoneEmail.addClass('error'); 
 
     setTimeout(function(){ 
 
     phoneEmail.removeClass('error'); 
 
     }, 1000); 
 
    } 
 
    }); 
 
});

input { 
 
    -webkit-transition: background-color 1s ease-out; 
 
    -moz-transition: background-color 1s ease-out; 
 
    -o-transition: background-color 1s ease-out; 
 
    transition: background-color 1s ease-out; 
 
} 
 

 
input.error { 
 
    background: #f3765b; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form> 
 
    <input type="text" id="phone_email" placeholder="Phone or email"> 
 
    <input type="password" id="pass" placeholder="password"> 
 
    <button id="login_button">Log in</button> 
 
</form>

Answer 2

嘗試是這樣的：

//check if input is empty  
$('.someinputs').each(function(){ 
      if($(this).val() == 0 || $(this).val() == '') { 
      $(this).addClass('empty_field'); 
      } 
      else { 
      $(this).removeClass('empty_field'); 
      } 
     }); 

//this function lights field which have class '.empty_field' 
function lightEmpty(){ 
       $('.empty_field').each(function(){      
        $(this).css('border','2px solid #d8512d'); 
       }); 
       setTimeout(function(){ 
       $('.empty_field').each(function(){       
        $(this).css('border','1px solid #cdcdcd'); 
       }); 
       },1500); 
} 

//this triggers lightEmpty() 
if (emptyInputs.length != 0) 
    { 
     lightEmpty(); 
    } 

這只是改變的特定顏色的投入邊境時，你可以在setTimeout函數編寫。我想你可以找出在哪裏使用此代碼