JSFiddle - React, Tailwind, and code Playground

HTML

<script type="text/javascript" type="javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.js"></script>
<form id="validate" action="validate.html" method="post" name="validate">

<label for="nome">Nome:</label>
<input type="text" name="nome" />

<label for="idade">Idade:</label>
<input type="text" name="idade" />

<label for="email">E-mail:</label>
<input type="text" name="email" />

<label for="pais">País:</label>

<select name="pais"> <option value="">Selecione</option> <option value="brasil">Brasil</option> <option value="canada">Inglaterra</option> </select><input type="submit" value="Validar" />

</form>

CSS

form label, form input {
    display: block;
    margin: 0 0 10px 0;
}
form input {
  height: 20px;   
}

label.error {
    border: 1px solid red;
    color: red;
    font-weight: bold;
    padding: 3px;
    background-color: #99CCFF;
    margin: 6px 0;
    width: 120px;
    text-align: center;
}

JavaScript

$(function(){
    
jQuery.validator.addMethod("minAge", function(value, element, params) {
return this.optional(element) || value > params;
}, "Você precisa ter mais de 18 anos.");    

$("#validate").validate({

submitHandler: function(form) {
    $(form).submit(function(){
        alert('todos os dados foram preenchidos corretamente');
        return false;
    });
    },
    rules: {
    nome: 'required',
    idade: {
        required: true,
        minAge: 18
    },    
    email: {
        required: true,
        email: true
    },        
    pais: 'required'
    },
    messages: {
        nome: 'Você não preencheu seu nome',
        idade: {
        required: 'Você não preencheu sua idade',
    },
    email: {
        required: 'Você precisa preencher um e-mail',
        email: 'Endereço de e-mail não válido'
    },
        pais: 'Você precisa escolher um país'
    }

    });

});