How to change focus color when input is filled in with required attribute javascript/html/css

Question

I am working on a HTML Form. I have added required elements to some of my input fields. Because I am using Bootstrap the input fields are by default blue when it focus. I have set the required input fields to a red color with input:required:focus {border: 1px solid red;}. Now, when the required input fields are filled in I want to change the input field border to green. My question, is this possible with CSS and how? If not, How can I achieve this with Javascript or something else?

input:required:focus {
  border: 1px solid red;
  outline: none;
}
textarea:required:focus {
  border: 1px solid red;
  outline: none;
}
.form-horizontal {
  padding-left: 15px;
  padding-right: 15px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<form class="form-horizontal">

  <div class="form-group">
    <label class="col-md-2 control-label" for="Name">
      Full name <span class="required">*</span>
    </label>
    <div class="col-md-10">
      <input id="Name" name="Name" placeholder="Full name" class="form-control input-md" required="" type="text">
      <span class="format-block"><a data-toggle="tooltip" data-placement="right" title="John Doe">Format</a></span>
    </div>
  </div>

  <div class="form-group">
    <label class="col-md-2 control-label" for="email">
      E-mail <span class="required">*</span>
    </label>
    <div class="col-md-10">
      <input id="email" name="email" placeholder="E-mail" class="form-control input-md" required="" type="email">
      <span class="format-block"><a data-toggle="tooltip" data-placement="right" title="[email protected]">Format</a></span>
    </div>
  </div>

  <div class="form-group">
    <label class="col-md-2 control-label" for="phone">
      Phone number
    </label>
    <div class="col-md-10">
      <input id="phone" name="phone" placeholder="Phone number" class="form-control input-md" type="text">
      <span class="format-block"><a data-toggle="tooltip" data-placement="right" title="Only numbers">Format</a></span>
    </div>
  </div>

  <div class="form-group">
    <label class="col-md-2 control-label" for="question">
      Question <span class="required">*</span>
    </label>
    <div class="col-md-10">
      <textarea rows="20" cols="40" class="form-control" id="question" required="" name="question"></textarea>
    </div>
  </div>

  <div class="col-md-10 col-md-offset-2">
    <button type="submit" class="btn btn-default formbuttonalign">Send mail!</button>
  </div>
</form>

Answer 1

So I found out that HTML5 contains a valid and invalid selector.

  input:required:focus {
  border: 1px solid red;
  outline: none;
  }

 textarea:required:focus {
 border: 1px solid red;
 outline: none;
 }

input:focus:valid {
border: 1px solid green;
outline: none;
}

input:focus:invalid {
border: 1px solid red;
outline: none;
}


input:valid {
border: 1px solid green;
}

You can use it in combination with the required selector to check if its valid, so if its filled in AND if its correct like a telephone number only contains numbers. The fun part about is that its only HTML5 & CSS3 :)

Answer 2

When do you want it to turn green? Immediately you start typing, or when the input field loses focus? Let me assume you want this to happen when it loses focus. Another question is: should it remain green when it loses focus? I'm assuming it will, since my first assumption is that it will only turn green when it loses focus. Correct me if any of my assumptions are wrong

Javascript:

$(function(){
        $('input:required,textarea:required').on('blur', function(){
           if($(this).val()!==''){  //assuming the form doesn't have some fields populated by default.
             $(this).addClass('green-border');
           } else {
             $(this).removeClass('green-border');
           }
        });
  });

.green-border {
  border: 1px solid green !important;  
}

input:required:focus {
  border: 1px solid red;
  outline: none;
}

textarea:required:focus {
  border: 1px solid red;
  outline: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<form class="form-horizontal">

                <div class="form-group">
                    <label class="col-md-2 control-label" for="Name">Full name <span class="required">*</span></label>
                    <div class="col-md-10">
                        <input id="Name" name="Name" placeholder="Full name" class="form-control input-md" required="" type="text">
                        <span class="format-block"><a data-toggle="tooltip" data-placement="right" title="John Doe">Format</a></span>
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-md-2 control-label" for="email">E-mail <span class="required">*</span></label>
                    <div class="col-md-10">
                        <input id="email" name="email" placeholder="E-mail" class="form-control input-md" required="" type="email">
                        <span class="format-block"><a data-toggle="tooltip" data-placement="right" title="[email protected]">Format</a></span>
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-md-2 control-label" for="phone">Phone number</label>
                    <div class="col-md-10">
                        <input id="phone" name="phone" placeholder="Phone number" class="form-control input-md" type="text">
                        <span class="format-block"><a data-toggle="tooltip" data-placement="right" title="Only numbers">Format</a></span>
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-md-2 control-label" for="question">Question <span class="required">*</span></label>
                    <div class="col-md-10">
                        <textarea rows="20" cols="40" class="form-control" id="question" required="" name="question"></textarea>
                    </div>
                </div>

                <div class="col-md-10 col-md-offset-2">
                <button type="submit" class="btn btn-default formbuttonalign">Send mail!</button>
                </div>
        </form>