JSFiddle - React, Tailwind, and code Playground
HTML
<form action="cadastro/cadastrando.php" method="post">
<div class="elemf">
<label>Nome</label>
<input id="nome" type="text" name="nome" maxlength="15" />
<p class="nome_erro">Campo Obrigatório. São permitidos letras e acentos.</p>
</div>
</form>
CSS
.nome_erro {
display: none;
}
.erro {
font: 12px Verdana, Arial, Helvetica, sans-serif;
color: #ff0000;
left: 10px;
display: inline-block;
}
JavaScript
$(document).on('blur', 'input, textarea, select', function () {
if ($(this).val() === '') {
switch ($(this).attr('id')) {
case 'nome':
$('.nome_erro').addClass('erro');
break;
}
} else {
switch ($(this).attr('id')) {
case 'nome':
$('#nome_erro').removeClass('erro');
break;
}
}
});