JQueryマルチスタットフィールドの背景色を設定する

Question

フォームフィールドでは、4つのフィールドの状態にアイドル、フォーカス、有効、無効の4種類の色を使用したいと考えています。
概念は、触れられていないフィールドのためのリラックスした色、フィールドが入力されると中立の色、後でユーザーが入力している間、有効性に応じて良好な/ nogoodの色を持つことです。
現時点では、2つの妥当性の色はCSSによって入力で処理されています：必須：無効{..} ...
フィールドがまだ空のときに色付けを防ぐ方法がわかりません。私はこの機能を設定した場合
さらに、：入力されたとき

$('.fieldBack').on('focus', function() { 
    this.style.background=colorIdle; 
}); 

フィールドが正しく白（colorIdle）に設定されていますが、HTML5のチェックが失われたかのように、それは関係なく、実際の妥当性の白いままです。 私はかなり混乱しています。

Answer 1

私は、これはあなたが何をしたいかだと思う：

Demo

Javascriptを

var colorIdle = 'lightblue'; 
var colorFocus = 'lightgreen'; 
var colorFilled = 'green'; 
$("input").focusin(function() { 
    $(this).css('background-color', colorFocus) 
}); 

$("input").focusout(function() { 
    if($(this).val() != '') { 
    $(this).css('background-color', colorFilled) 
    } else { 
    $(this).css('background-color', colorIdle) 
    } 
}); 

HTML

<form id="formPro" action=""> 
    Required input <input type="text" required> <br/> 
    Normal input <input type="text"> 
    <button type="submit">Submit</button> 
</form> 

CSS

input { 
    background-color: lightblue; 
} 

https://jsfiddle.net/qLnrcdod/5/