custom checkbox input validation feedback

Question

I have constructed a basic contact form which includes heavy styling. I have used specified checkbox characters in order to not use the bland default checkbox. When you use a checkbox which differs from the default checkbox you need to hide the original. When you do this the feedback that you get from not checking a checkbox with the "required" attribute goes away with it. If a user doesn't check the box and they press the submit button, the form is not submitted and the user may be left wondering why.

I figured an easy solution would be to use some jquery. I'm not too experienced with jquery or designing forms but usually I can get away with finding a script to fit my situation. I can't find anything for this simple task so here I am.

Here is my code.

also, I have this entire project live for testing at http://www.vabugman.com/bootstrap if you would like to see what im working with.

Thanks in advance!

I eliminated as much useless divs and css which wasnt relevant to my post although i did include some jquery which was used in another part of my project for a smooth scroll because I'm not sure if its part of the problem.

  <script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
  <script src="js/bootstrap.js"></script>
  <script>
   $(function() {
     $('a[href*="#"]:not([href="#"])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
     $('html, body').animate({
       scrollTop: target.offset().top
     }, 1000);
     return false;
      }
    }
     });
   });
      $(function () {
    $('#contactform').terms(function () {

     var fields = $("input[name='terms']").serializeArray();
     if (fields.length == 0) {
      //alert('nothing selected');
      $("#myText").html("Selected");
     }
     else {
      //alert(fields.length + " items selected");
      $("#myText").html("Not Selected");
     }

    });
   });
  </script>

input[type="checkbox"]:required {
display: none;
}
input[type="checkbox"]:required:invalid + label:before {
content: "\2610";
font-size: 1.6em;
color: white;
}
input[type="checkbox"]:required:valid + label:before {
content: "\2611";
font-size: 1.6em;
color: #e51b23;
}

<form role="form" id="contactform" class="form-horizontal" onsubmit="return checkForm(this);" action="contact.php" method="post">
  <fieldset class="">
    <!-- Contact Form -->
    <legend class="formlegend">
      <h1><span class="glyphicon glyphicon-comment"></span>Free Quote</h1>
    </legend>
    <!-- First Name input-->
    <div class="form-group">
      <label class="control-label" for="textinput"></label>
      <input id="textinput" name="firstname" type="text" placeholder="First Name" required="">
    </div>
    <!-- Last Name input-->
    <div>
      <label class="control-label" for=""></label>
      <input id="" name="lastname" type="text" placeholder="Last Name" class="form-control input-lg" required="">
    </div>
    <!-- Phone input-->
    <div>
      <label class="control-label" for=""></label>
      <input id="" name="phone" type="text" placeholder="Phone" class="form-control input-lg input-block-level" required="">
    </div>
    <!-- Email input-->
    <div>
      <label class="control-label" for=""></label>
      <input id="" name="email" type="text" placeholder="E-mail" class="form-control input-lg" required="">
    </div>
    <!-- Comments -->
    <div>
      <label class="control-label" for=""></label>
      <textarea class="form-control formtextarea" id="" name="comments" placeholder="Comments"></textarea>
    </div>
    <!-- Agree Checkbox -->
    <div class="checkbox text-center">
      <input class="text-center" id="terms" type="checkbox" required="" name="terms">
      <label class="text-center" style="padding-left:0px;" for="terms">
        Yes, I give fksdlfj Pest Control LLC permission to contact me.
      </label>
      <div id="myText"><mark style="color:red">this is where i want user feed-back!!!!</mark></div>
    </div>
    <!-- Send Button -->
    <div class="col-sm-5 col-sm-offset-1 col-md-5  col-lg-3 col-lg-offset-2 padding">
      <label class="control-label center-block" for=""></label>
      <button name="sendbutton" class="btn btn-button-contact center-block"><span>&nbsp;</span><b>Send for a quote</b></button>
    </div>
  </fieldset>
</form>