1

Tenho um formulário dentro de um modal, serve para cadastro de empresa. Estou tentando fazer o botão de submit ficar desabilitado até que o cep e o cnpj da empresa sejam digitados da maneira correta. Já fiz uma função parecida para um campo de login, mas não consigo fazer isso funcionar aqui.

//faz o submit do cadastro de empressa ficar desabilitado no carregamento
$(document).ready(function() { 
    $('#btnCadastrarEmp').prop('disabled', true);  
});

//faz o submit do cadastro de empresa ficar desabilitado se campo for incompativel com regex
$(document).keyup(function() {
	if (! $('#empresaCep').val().match(/[0-9]{5}[-]?[0-9]{3}/) {
		$(document).ready(function() { 
    		$('#btnCadastrarEmp').prop('disabled', true); 
		});
	}	
}

//faz o submit do cadastro de empresa ficar habilitado se campo for compativel com regex
$(document).keyup(function() {
	if ($('#empresaCep').val().match(/[0-9]{5}[-]?[0-9]{3}/) {
		$(document).ready(function() { 
    		$('#btnCadastrarEmp').prop('disabled', false); 
		});
	}	
}

Quando coloco só o código para desabilitar o submit, a página já carrega com o submit bloqueado(como eu quero). Mas quando coloco o restante do código para habilitar o submit caso o valor do campo seja igual ao regex que defini, da erro ( a pagina já carrega com o submit liberado). Não sei se o defeito está no regex ou onde, quando fiz isso pra validar um formulário de login deu certo. Além desse problema, alguém sabe como seria um regex de cnpj? Eu tentei esse: [0-9]{2}.?[0-9]{3}.?[0-9]{3}/?[0-9]{4}-?[0-9]{2}

2 Respostas 2

2

Estás a duplicar código sem necessidade.

Algumas sugestões:

Isto deve estar no HTML e não no JavaScript:

$('#btnCadastrarEmp').prop('disabled', true);  

Dessa maneira garantes que não há efeito tipo FOUC, ou por erros no JS isso vai falhar e o submit fica habilitado.


Esta função só se usa uma vez, quando a página está a carregar, depois disso ela é desnecessária:

$(document).ready(function() { 

Usar $(document).keyup(function() { múltiplas vezes vai fazer com que chames funções vezes a mais, sem necessidade. Evita isso usando seletores mais específicos, ou colocando a lógica dentro da mesma (e única) $(document).keyup(function() {


Dito isso, uma sugestão:

$(document).ready(function() {
  // $('#btnCadastrarEmp').prop('disabled', true); isto passa para o HTML
  var btn = document.getElementById('btnCadastrarEmp');
  $('#empresaCep').on('input', function() {
    btn.disabled = !this.value.match(/[0-9]{5}[-]?[0-9]{3}/);
  });
});

1
0

A expressão $(document).ready(function() { ... é executada quando a página termina de carregar, logo você só precisa declarar esse trecho uma vez.

Para que seu código funcione, tente fazer da seguinte forma.

//faz o submit do cadastro de empressa ficar desabilitado no carregamento
$(document).ready(function() { 
    $('#btnCadastrarEmp').prop('disabled', true);  
});

//faz o submit do cadastro de empresa ficar desabilitado se campo for incompativel com regex e habilita caso seja compatível
$(document).keyup(function() {
    if ($('#empresaCep').val().match(/[0-9]{5}[-]?[0-9]{3}/)) {
        $('#btnCadastrarEmp').prop('disabled', false); 
    } else {
        $('#btnCadastrarEmp').prop('disabled', true);  
    }
}

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .