JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap2-toggle.min.css">
<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/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.js"></script>
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap2-toggle.min.js"></script>
<form id="myform">
  <div>
     <input type="text" class="form-control" name="Nome" id="Nome" />
  </div>
  <br />
  <div>
     <input type="checkbox" name="Permitir" id="Permitir" data-toggle="toggle" data-size="large" data-width="75" data-height="55"/>
  </div>  
  <br />
  <button class="btn btn-success">Enviar</button>
</form>
<ul id="errors">
</ul>

JavaScript

$("#myform").validate({  
  ignore: [],
  rules: {
    Nome: {
      required: true
    },
    Permitir: {
      required: true
    }
  },
  messages: {
    Nome: { required: "Nome é obrigatório" },
    Permitir: { required: "Permitir é obrigatório"}
  },
  errorLabelContainer: "#errors",
  errorElement: "li"
});