Bootstrap 3 Template

This is a simple Twitter Bootstrap 3 template. You can fork it to get a ready to use Bootstrap 3 fiddle.

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/js/bootstrap-select.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/css/bootstrap-select.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.1/jquery.validate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.1/jquery.validate.min.js"></script>
<form id="form-jsvalidate" action="/" method="post">

<ol class="error-message-container error-menu">
<a href="#firstName"><label class="error" for="firstName" generated="true"></label></a>
  <a href="#lastName"><label class="error" for="lastName" generated="true"></label></a>
  <a href="#dobMonth"><label class="error" for="dobMonth" generated="true"></label></a>
  <a href="#country"><label class="error" for="country" generated="true"></label></a>
              </ol>
            
            <div class="form-group">
              <label for="firstName" class="control-label">First Name</label>
              <label class="error" for="firstName" generated="true"></label>
                <input type="text" class="form-control" id="firstName" name="firstName" />
            </div>
            
            <div class="form-group">
              <label for="lastName" class="control-label">Last Name</label>
              <label class="error" for="lastName" generated="true"></label>
              <input type="text" class="form-control store" name="lastName" value="" />
            </div>
                  
                 
                 <div class="form-group">
                 <label class="error" for="dobMonth" generated="true"></label>

                        <select name="dobMonth" id="dobMonth" class="required selectpicker">
                           ...

CSS

/* Latest compiled and minified CSS included as External Resource*/

/* Optional theme */
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');

body {
    margin: 10px;
}

ol {
    list-style-type: decimal !important;
    padding-left: 40px;
}

.error-message-container {
        background: lightblue;
        margin-bottom: 20px;
    }
    
    .error-message-container a {
      display:block;
    }

    label.error {
        color: red;
    }

    input.error,
    select.error,
    .input-validation-error button {
        border: 1px solid red !important;
    }

JavaScript

$(document).ready(function () {
    $("#form-jsvalidate").validate({
        rules: {
            "country": {
                required: true
            },
            "firstName": {
                required: true
                //minlength: 5
            },
            "lastName": {
                required: true
            },
            "dobMonth": {
                required: true
            }
        },
        messages: {
            "country": {
                required: "Country is required"
            },
            "firstName": {
                required: "Enter your first name"
            },
            "lastName": {
                required: "Enter your last name"
            },
            "dobMonth": {
                required: "Enter the month you were born"
            }
        },
        submitHandler: function (form) {
            alert('valid');
            return false;
        }
    });
});

$(document).ready(function () {
    $('#form-jsvalidate').validate().settings.ignore = ':not(select.selectpicker, select:visible, input:visible, textarea:visible)';
});

$('.btn-submit-val').on('click', function() {
    $("#form-jsvalidate").valid();
    return false;
});

$(function () {
  $('select[name^="country"]').change(function () {
    var selValue = $(this).val();
    $("#form-jsvalidate").validate().element(this);
    if (selValue.length > 0) {
      $(this).next('div').removeClass("input-validation-error");
    }
    else {
      $(this).next('div').addClass("input-validation-error");
    }
  });
});



$('.btn-submit-val').on('click', function(i, el) {
    $('.error-menu a > label:visible').wrap('<li></li>');
    $('.error-menu a > label:hidden').unwrap('<li></li>');
});