Bootstrap 3 + Validation + Glyphicons

Bootstrap 3 Validation Plugin with Glyphicons

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.css">
<form id="myform" class="form-horizontal">
    <div class="form-group has-feedback">
        <label for="fname" class="control-label col-md-6">First Name:</label>
        <div class="col-md-6">
            <input type="text" name="fname" id="fname" class="form-control" placeholder="Enter first name" />
            <span class="glyphicon form-control-feedback" id="fname1"></span>
       </div>
    </div>
    <div class="form-group has-feedback">
        <label for="lname" class="control-label col-md-6">Last Name</label>
        <div class="col-md-6">
            <input type="text" name="lname" id="lname" class="form-control" placeholder="Enter last name" />
            <span class="glyphicon form-control-feedback" id="lname1"></span>
        </div>
    </div>
    
    <label for="checkbox[]"></label>
    <div class="row">
    <div class="col-xs-12 col-sm-6 col-md-4 col-sm-offset-3 col-md-offset-4">
      <div class="panel panel-default">
        <!-- Default panel contents -->
        <div class="panel-heading">Material Design Switch Demos</div>

        <!-- List group -->
        <ul class="list-group">
          <li class="list-group-item">
            Bootstrap Switch Default
            <div class="material-switch pull-right">
              <input id="someSwitchOptionDefault" name="checkbox[]" type="checkbox" />
              <label for="someSwitchOptionDefault" class="label-default"></label>
            </div>
          </li>
          <li class="list-group-item">
            Bootstrap Switch Primary
            <div class="material-switch pull-right">
              <input id="someSwitchOptionPrimary" name="checkbox[]" type="checkbox" />
              <label for="someSwitchOptionPrimary" class="label-primary"></label>
            </div>
          </li>
          <li...

CSS

body {
    padding: 20px;
}

.material-switch > input[type="checkbox"] {
  display: none;
}

.material-switch > label {
  cursor: pointer;
  height: 0px;
  position: relative;
  width: 40px;
}

.material-switch > label::before {
  background: rgb(0, 0, 0);
  box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.5);
  border-radius: 8px;
  content: '';
  height: 16px;
  margin-top: -8px;
  position: absolute;
  opacity: 0.3;
  transition: all 0.4s ease-in-out;
  width: 40px;
}

.material-switch > label::after {
  background: rgb(255, 255, 255);
  border-radius: 16px;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
  content: '';
  height: 24px;
  left: -4px;
  margin-top: -8px;
  position: absolute;
  top: -4px;
  transition: all 0.3s ease-in-out;
  width: 24px;
}

.material-switch > input[type="checkbox"]:checked + label::before {
  background: inherit;
  opacity: 0.5;
}

.material-switch > input[type="checkbox"]:checked + label::after {
  background: inherit;
  left: 20px;
}

JavaScript

$('#myform').validate({    
    rules: {
        fname: {
            minlength: 3,
            maxlength: 15,
            required: true
        },
        "checkbox[]": {
        required: true,
        minlength: 1
        },
        lname: {
            minlength: 3,
            maxlength: 15,
            required: true
        }
    },
    messages:{
    "checkbox[]": "<span style=\"color: #a94442;\">Uma das opções deve ser marcada *</span>"
    },
    highlight: function(element) {
        var id_attr = "#" + $( element ).attr("id") + "1";
        $(element).closest('.form-group').removeClass('has-success').addClass('has-error');
        $(id_attr).removeClass('glyphicon-ok').addClass('glyphicon-remove');         
    },
    unhighlight: function(element) {
        var id_attr = "#" + $( element ).attr("id") + "1";
        $(element).closest('.form-group').removeClass('has-error').addClass('has-success');
        $(id_attr).removeClass('glyphicon-remove').addClass('glyphicon-ok');         
    },
    errorElement: 'span',
        errorClass: 'help-block',
        errorPlacement: function(error, element) {
            if(element.length) {
                error.insertAfter(element);
            } else {
            error.insertAfter(element);
            }
        } 
 });