Hello again! So I have been working on a big project recently and had to implement some sort of validation in a form. Looked around and tested many different solutions but most was to rigid for my application or relied on even more js-files to be piled on the system. After some searching and testing I found a solution at Formden (go there and check out the original code) that did what I wanted and nothing more and was easily adaptable.

The original code had text that was displayed informed the user of what was wrong and coloured the border in the “error place”. I didn’t need that, the mandatory fields had date/time pickers etc, so only the colour indicator and a final splash screen on submit (with “go back clumsy user!” 😉 ) was to be used. Seeing that I was running Bootstrap and it having a nice validation-indicator-design I mashed the two together! Oh and I adapted the script so you can choose which fields are to be validated at submit in the form (original validated the entire form), just add the class req to the input-field.

There is individual real-time validation functions for each unique input type, seen in this example is for Google Maps search box, jQuery UI datepicker and a time-picker. For more examples for validation of e-mail etc. check out the code at Formden.

I wont create a demo-file or complete code here, I assume that you can insert the Bootstrap, jQuery and jQuery UI scripts + css by yourself.

<script>
$(document).ready(function() {
<!-- Real-time Validation -->

<!-- Google Maps Search Box -->
$('#pac-input').on('input', function() {
   var input=$(this);
   var inputPar=$(this).parent();
   var is_name=input.val();
   if(is_name){
      inputPar.removeClass("has-error").addClass("has-success");
   }
   else{
      inputPar.removeClass("has-success").addClass("has-error");
   }
});

<!-- jQuery UI datepicker -->
$('#datepicker').on('change', function() {
   var input=$(this);
   var inputPar=$(this).parent();
   var is_name=input.val();
   if(is_name){
      inputPar.removeClass("has-error").addClass("has-success");
   }
   else{
      inputPar.removeClass("has-success").addClass("has-error");
   }
});

<!--Timepicker -->
$('#lesson_start_time').on('changeTime', function() {
   var input=$(this);
   var inputPar=$(this).parent();
   var is_name=input.val();
   if(is_name){
      inputPar.removeClass("has-error").addClass("has-success");
   }
   else{
      inputPar.removeClass("has-success").addClass("has-error");
   }
});

<!-- On Submit Validation-->
$("input.btn-submitter").click(function(event){
   <!-- Makes an array of the fields marked for validation -->
   var form_data=$(".req").serializeArray(); 
   var error_free=true;
   for (var input in form_data){
      var element=$(".create_form_"+form_data[input]['name']);
      var elementPar = element.parent();
      var valid=elementPar.hasClass("has-success");
      if (!valid ){
         elementPar.addClass("has-error"); 
         error_free=false;
      }
      else {
         elementPar.removeClass("has-error");
      }
   }
<!-- 
If the form isn't valid it wont be submitted, 
the missing fields marked and a splash screen shown
-->
   if (!error_free){
      $("#missing").addClass("shower"); <!-- Yes you can use .show, I prefer using adding a class-->
      event.preventDefault();
   }
});
});
</script>

<!-- Some css for the splash screen -->
<style>
#missing {
   display: none;
   z-index: 9999;
}

.shower {
   display: block!important;
}
</style>
<!-- Error splash message -->
<div id="missing">
    <div class="error_mess">
         <h2>Missing information, go back and complete the form.</h2>
    </div>
</div>

<!-- Example form -->
<form id="create_form">
<div class="input-group has-feedback">
    <span class="input-group-addon glyphicon glyphicon-map-marker" aria-hidden="true" id="basic-addon1"></span>
    <input type="text" class="form-control create_form_trip_destination req " id="pac-input" aria-describedby="basic-addon1" name='trip_destination' value=''>
</div>

<div class="input-group has-feedback">
    <span class="input-group-addon glyphicon glyphicon-calendar" aria-hidden="true" id="basic-addon1"></span>
    <input type="text" name='trip_startdate' class="req form-control datepicker inputclass1 create_form_trip_startdate" id="datepicker" value="">
</div>

<div class="input-group has-feedback">
     <span class="input-group-addon glyphicon glyphicon-play" aria-hidden="true" id="basic-addon1"></span>
     <input type="time" name='trip_starttime' id="lesson_start_time" class=" req inputclass1 form-control ui-timepicker-input create_form_trip_starttime" placeholder="Start time" aria-describedby="basic-addon1" value="">
</div>

<input class="btn btn-default btn-lg btn-submitter" type='submit' value='Submit'>
</form>

<!-- Small script for controlling the splash screen -->
<script type="text/javascript">
    var shutter = $("#missing");
    shutter.on('click', function() {
        shutter.removeClass("shower");
    });
</script>

It can certainly be improved so go ahead and make it better and adapt it for your project!

Hope it can be of some help.