JSFiddle - React, Tailwind, and code Playground

by maleol

HTML

<script
  src="https://code.jquery.com/jquery-3.3.1.js"
  integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
  crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.js"></script>
<form id="formularioContato" onSubmit="return validar(this);" action="" method="post">
  <table width="577" border="0" align="center" cellpadding="5" cellspacing="0">
    <tr>
      <td colspan="3" align="center" scope="col"><span>Fale Conosco</span></td>
    </tr>
    <tr>
      <td width="123"><div align="right"><strong>Nome(*) </strong></div></td>
      <td width="432"><input type="text" name="nome" size="50" /></td>
    </tr>
    <tr>
      <td><div align="right"><strong>E-mail(*)</strong></div></td>
      <td><input type="text" name="email" size="50" /></td>
    </tr>
    <tr>
      <td><strong><div align="right">Mensagem(*)</div></strong></td>
      <td><textarea name="mensagem" cols="50" rows="5"></textarea></td>
    </tr>
    <tr>
      <td colspan="3" align="center"><input type="submit" name="Enviar" value="Enviar " />
        <input type="reset" name="Limpar" value="Limpar" /></td>
    </tr>
  </table>
</form>

CSS

* {
    font-family: Verdana;
    font-size: 96%;
}
label {
    display: block;
    margin-top: 10px;
}
label.error {
    float: none;
    color: red;
    margin: 0 .5em 0 0;
    vertical-align: top;
    font-size: 10px
}
p {
    clear: both;
}
.submit {
    margin-top: 1em;
}
em {
    font-weight: bold;
    padding-right: 1em;
    vertical-align: top;
}

JavaScript

$(document).ready( function() {
    $("#formularioContato").validate({
        // Define as regras
        rules: {
            nome: {
                // campoNome será obrigatório (required) e terá tamanho mínimo (minLength)
                required: true, minlength: 2
            },
            email: {
                // campoEmail será obrigatório (required) e precisará ser um e-mail válido (email)
                required: true, email: true
            },
            mensagem: {
                // campoMensagem será obrigatório (required) e terá tamanho mínimo (minLength)
                required: true, minlength: 2
            },
        },
        // Define as mensagens de erro para cada regra
        messages: {
            nome: {
                required: "Digite o seu nome", minLength: "O seu nome deve conter, no mínimo, 2 caracteres"
            },
            email: {
                required: "Digite o seu e-mail para contato", email: "Digite um e-mail válido"
            },
            mensagem: {
                required: "Digite a sua mensagem", minLength: "A sua mensagem deve conter, no mínimo, 2 caracteres"
            }
        }
    });
});