JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/additional-methods.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-filestyle/1.2.1/bootstrap-filestyle.min.js"></script>
<form id="form1" name="form1" method="post">
  <div>
    <label> Digite o nome:
      <input type="text" name="tname" class="form-control" />
    </label>
  </div>
  <div>
    <label> Escolha a Foto:
      <input type="file" name="tfoto" id="tfoto" />
    </label>
  </div>
  <button class="btn btn-success">Enviar</button>
</form>

JavaScript

$(document).ready(function()
{
	$("#form1").validate({
  		ignore: ":hidden",
      rules: {
      	tname : {
        	required : true
        },
        tfoto : {
        	required : true,
          extension: "jpg|jpeg|gif"
        }
      },
      messages: {
      	tname : {
        	required : 'Digite o nome'
        },
        tfoto : {
        	required : 'Escolha a foto',
          extension: 'Foto do tipo inválida'
        }
      }
  });
  
  $("#tfoto").filestyle();
});