JSFiddle - React, Tailwind, and code Playground

by Pablo Carvalho

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="input-prepend">
  <form id="idCadastro" method="post" action="#">
    <span class="add-on"><i class="icon-user"></i></span>
    <input id="nome" name="nome" type="text" placeholder="Nome" />
  </form>
</div>

CSS

input.error {
    border: 1px solid red;
}
label.error {
    font-weight: normal;
    color: red;
}
input.valid {
    border: 1px solid blue;
}
label.valid {
    font-weight: normal;
    color: blue;
}

JavaScript

$(document).ready(function() {
  $("#idCadastro").validate({
    rules: {
      "nome": {
        required: true, 
        minlength: 2
      }
    },
    messages: {
      "nome": {
        required: "Digite o seu nome"
      }
    }
  });
});