Edit in JSFiddle


              
form{margin: 20px;}
form label{width: 100px;display: inline-block;}
form input:focus:required:invalid{ background: #f2f0aa; outline: none; }
form input[type=text]:focus:not([pattern]):required:invalid{background: #fff; }
form .val{ font-size:12px;background: #9e3033;color: #fff;display: none;padding: 3px;text-align: center;width: 260px;}
form input:focus + .val{ display: inline-block; }
form input:focus:required:valid + .val{ background: #0aab4a; }
form input:focus:required:valid + .val .invalid { display: none; }
form input:focus:required:invalid + .val .valid{ display: none; }
form input:required:valid{background-color: #eee;}
<form>
<div>
<label for="msg">おなまえ</label> 
<input type="text" id="msg" name="msg" placeholder="田中太郎" required />
</div>
    
<div>
<label for="email">メール</label> 
<input type="email" id="email" name="email" placeholder="example@example.com" required />
<p class="val">
<span class="invalid">正しいメールアドレス入れてくださいまし。</span>
<span class="valid">正しいメールアドレスです。</span>
</p>
</div>

<div>
<label for="tel">電話番号</label> 
<input type="tel" id="tel" name="tel" pattern="\d{10}" placeholder="0312345678" required />
<p class="val">
<span class="invalid">入力は数字のみでお願いします</span>
<span class="valid">おっけーです!</span>
</p>
</div>

<div>
<label for="address">おところ</label>
<input id="address" name="address" type="text" required />
</div>

<div>
<label for="postcode">郵便番号</label>
<input id="postcode" name="postcode" type="number" min="001000" max="9999999" maxlength="7" required />
<p class="val">
<span class="invalid">字数が足りないか数字以外が混ざってるっぽいです</span>
<span class="valid">おっけーです!</span>
</p>
</div>
<div>
<label for="state">都道府県</label>
<select name="state" id="state">
 <option>東京</option>
 <option>大阪</option>
 <option>広島</option>
 <option selected>京都</option>
 <option>長崎</option>
</select>
</div>

<div>
<label for="password">パスワード</label>
<input id="password" name="password" type="password" pattern="(?=^.{8,}$)((?=.*\d)|(?=.*\W+))(?![.\n])(?=.*[A-Z])(?=.*[a-z]).*" required /> 
 <p class="val">
<span class="invalid">大文字、小文字、数字を含めて8文字以上です</span>
<span class="valid">おっけーです!</span>
</p>
</div>
<div>
 <input type="submit" value="送信" />
</div>
</form>