ブートストラップフォームのバリデーションの成功とエラーの色を変更する

Question

これは私のフォームです。エラーや何かが発生したときにフォームの色を変更したいのですが。

例：ユーザーが必要なフィールドに何も入力しなかった場合、
ブートストラップのCSSクラスを使用して色を変更したいのですが、どのようにすればそれを実現できるか教えていただけますか？
p.s.私は新しいので、初心者の質問には申し訳ありません。

<form class="form-horizontal"> 
<fieldset> 

<!-- Form Name --> 
<legend>Form Name</legend> 

<!-- Text input--> 
<div class="form-group"> 
    <label class="col-md-4 control-label" for="name">Name</label> 
    <div class="col-md-5"> 
    <input id="name" name="name" type="text" placeholder="Enter Name" class="form-control input-md" required=""> 

    </div> 
</div> 

<!-- Password input--> 
<div class="form-group"> 
    <label class="col-md-4 control-label" for="password">Password</label> 
    <div class="col-md-5"> 
    <input id="password" name="password" type="password" placeholder="Enter Password" class="form-control input-md" required=""> 

    </div> 
</div> 

<!-- Button --> 
<div class="form-group"> 
    <label class="col-md-4 control-label" for="button"></label> 
    <div class="col-md-4"> 
    <input type = "submit" id="button" name="button" value = "Submit" class="btn btn-success"> 
    </div> 
</div> 

</fieldset> 
</form> 

Answer 1

この目的のために（:invalid）、個々の入力レベルにCSSセレクタがあります。あなたはそうのような、無効である子どもたちのためにチェックすることにより、フォーム全体を色付けすることができます

/* add space to denote child element */ 
form :invalid { 
    background: red; 
} 

Answer 2

は、ブートストラップのために、単にグループを形成するためにhas-errorクラスを追加します。 http://getbootstrap.com/css/#forms-help-text

そしてライブデモ：

<div class="form-group has-error"> 
    <label class="col-md-4 control-label" for="name">Name</label> 
    <div class="col-md-5"> 
    <input id="name" name="name" type="text" placeholder="Enter Name" class="form-control input-md" required=""> 
    </div> 
</div> 

詳細については、ドキュメントを見てhttp://jsbin.com/daxocivoho/1/edit?html,output