JSFiddle - React, Tailwind, and code Playground

by Samuel Guimarães

HTML

<script src=" https://cdnjs.cloudflare.com/ajax/libs/jquery.maskedinput/1.3.1/jquery.maskedinput.js"></script>
<form action="#" onsubmit="validaForm();" id="formCadastrar" method="post">
			<div class="line_form">
				<label>CPF</label>
				<input  class="campo_full" type="text" name="actionForm.cpf" id="txtCPF" />
			</div>
			<div class="line_form campo_cadastro">
				<label>Nome</label>
				<input class="campo_full" type="text" name="actionForm.nome" id="txtNome"/>
			</div>
			<div class="line_form campo_cadastro">
				<label>E-mail</label>
				<input class="campo_full" type="text" name="actionForm.email" id="txtEmail"/>
			</div>
			<div class="line_form campo_cadastro">
				<label>Senha</label>
				<input class="campo_full" name="actionForm.senha" type="password" id="txtSenha" maxlength="8"/>
			</div>
			<div class="line_form campo_cadastro">
				<label>Confirmar Senha</label>
        <input class="campo_full" name="actionForm.confSenha" type="password" id="txtConfSenha" maxlength="8"/>
			</div>
			<div class="line_bt_center margin_line_login">
				<a href="#" class="bt_cadastro campo_cadastro" id="btnCadastrar">Cadastrar<i class="icon-02"></i></a>
				<a href="#" class="bt_cadastro" id="btnValidarCpf">Validar <i class="icon-02"></i></a>
			</div>
			<hidden name="actionForm.operacao" id="hiddenOperacao"/>
		</form>

JavaScript

$(document).ready(function(){
 console.log('ready');
 
 function msgAlert(msg, tipo) {
	console.log(msg);
}

function validarCPF(cpf){
	if (cpf.length == 14)
		cpf = cpf.substr(0,3) + cpf.substr(4,3) + cpf.substr(8,3) + cpf.substr(12,2);
   cpf = cpf.replace(/\D/g, "");
   if(cpf.length != 11 || cpf == "00000000000" || cpf == "11111111111" ||
	  cpf == "22222222222" || cpf == "33333333333" || cpf == "44444444444" ||
	  cpf == "55555555555" || cpf == "66666666666" || cpf == "77777777777" ||
	  cpf == "88888888888" || cpf == "99999999999"){
	  return false;
   }

   soma = 0;
   for(i = 0; i < 9; i++)
   	 soma += parseInt(cpf.charAt(i)) * (10 - i);
   resto = 11 - (soma % 11);
   if(resto == 10 || resto == 11)
	 resto = 0;
   if(resto != parseInt(cpf.charAt(9))){
	 return false;
   }
   soma = 0;
   for(i = 0; i < 10; i ++)
	 soma += parseInt(cpf.charAt(i)) * (11 - i);
   resto = 11 - (soma % 11);
   if(resto == 10 || resto == 11)
	 resto = 0;
   if(resto != parseInt(cpf.charAt(10))){
	 return false;
   }
   return true;
 }


    $('#txtCPF').unmask().mask('999.999.999-99'); 
    $('#txtCPF').prop("type", "tel");

    $('.campo_cadastro').hide();

    $('#btnValidarCpf').click(doValidacaoCpf);

    $('#btnCadastrar').click(function(){
    console.log('cadastrar click');
      $('#formCadastrar').submit();
    });


    $("#txtConfSenha, #txtSenha").bind('input', function() {
      $(this).val($(this).val().replace(/[^0-9]/gi, ''));
    });

    //if('' !== "${pageInput.errorMessage}"){
    //  msgAlert("${pageInput.errorMessage}");
    //}

    if('label.erro.formatoemail' === "${pageInput.infoMessage}" || 'label.error.emailExistente' === "${pageInput.infoMessage}"){
      $('#txtCPF').unmask().attr('readonly', true);
      $('#btnValidarCpf').hide();
      $('.campo_cadastro').show();
      msgAlert("${pageInput.infoMessage}",voltaFocoEmail);
    }

    if('${pageInput.fluxoNormalizacao}' === 'true'){
      $('#txtCPF').unmask().attr('readonly', true);
     ...