JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.16.0/jquery.validate.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.16.0/additional-methods.min.js"></script>
<form method=post class="form-auth-small" action="../php/controller/registration_controller.php">
  <div class="form-group row m-t-10px">
    <div class="col-sm-6 text-left m-b-5px">
      <label><h5>RANK: </h5></label>
      <select class="form-control" name="rank" required="required">
        <option value="rank1">NUP</option>
        <option value="rank2">PO1</option>
        <option value="rank3">PO2</option>
        <option value="rank4">PO3</option>
        <option value="rank5">SPO1</option>
        <option value="rank6">SPO2</option>
        <option value="rank7">SPO3</option>
        <option value="rank8">SPO4</option>
        <option value="rank9">PINSP</option>
        <option value="rank10">PSINSP</option>
        <option value="rank11">PCINSP</option>
        <option value="rank12">PSUPT</option>
        <option value="rank13">PSSUPT</option>
        <option value="rank14">PCSUPT</option>
        <option value="rank15">PDIR</option>
        <option value="rank16">PDDG</option>
        <option value="rank17">PDG</option>
      </select>
    </div>
    <div class="col-sm-6 text-left m-b-5px">
      <label><h5>USERNAME: </h5></label>
      <input class="form-control" name="username" placeholder="Username must only contain characters [A-Z] and numbers [0-9]" type="text" minlength="1" required="required">
    </div>
    <div class="clearfix"></div>
    <div class="col-sm-6 text-left m-b-5px">
      <label><h5>FIRST NAME: </h5></label>
      <input class="form-control" name="fname" type="text" minlength="1" required="required">
    </div>
    <div class="col-sm-6 text-left m-b-5px">
      <label><h5>PASSWORD: </h5></label>
      <input...

JavaScript

$(document).ready(function () {
$('.form-auth-small').validate({
  rules: { 
    rank: {
      required: true
    },
    username: {
    	required: true,
      minlength: 3
    },
    fname: {
      required: true
    },
    mname: {
      required: true
    },
    lname: {
      required: true
    },
    pwd: {
      required: true
    },
    email: {
      required: true
    }
  },
  errorElement: "em",
  errorPlacement: function ( error, element ) {
    // Add the `help-block` class to the error element
    error.addClass( "help-block" );

    // Add `has-feedback` class to the parent div.form-group
    // in order to add icons to inputs
    element.parents( ".col-sm-5" ).addClass( "has-feedback" );

    error.insertAfter( element );

    // Add the span element, if doesn't exists, and apply the icon classes to it.
    if ( !element.next( "span" )[ 0 ] ) {
      $( "<span class='glyphicon glyphicon-remove form-control-feedback'></span>" ).insertAfter( element );
    }
  },
  success: function ( label, element ) {
    // Add the span element, if doesn't exists, and apply the icon classes to it.
    if ( !$( element ).next( "span" )[ 0 ] ) {
      $( "<span class='glyphicon glyphicon-ok form-control-feedback'></span>" ).insertAfter( $( element ) );
    }
  },
  highlight: function ( element, errorClass, validClass ) {
    $( element ).parents( ".col-sm-6" ).addClass( "has-error" ).removeClass( "has-success" );
    $( element ).next( "span" ).addClass( "glyphicon-remove" ).removeClass( "glyphicon-ok" );
  },
  unhighlight: function ( element, errorClass, validClass ) {
    $( element ).parents( ".col-sm-6" ).addClass( "has-success" ).removeClass( "has-error" );
    $( element ).next( "span" ).addClass( "glyphicon-ok" ).removeClass( "glyphicon-remove" );
  }
});
});