How to change the color of the focus when the entry is filled with the required attribute javascript / html / css

advertisements

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>

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>