enable and disable Ubmit according to input field validity

Asked

Viewed 603 times

1

I have a form inside a modal, serves for registration of company. I’m trying to get the Ubmit button disabled until the company zip code and cnpj are typed in the correct way. I’ve done a similar function for a login field, but I can’t make it work here.

//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); 
		});
	}	
}

When I only put the code to disable Submit, the page already loads with Submit locked (as I want). But when I put the rest of the code to enable Submit if the value of the field is equal to the regex I set, from the error ( the page already loads with the released Submit). I don’t know if the defect is in regex or where, when I did this to validate a login form worked. Beyond this problem, does anyone know what a regex of cnpj would look like? I tried this one: [0-9]{2}.? [0-9]{3}.? [0-9]{3}/? [0-9]{4}-? [0-9]{2}

2 answers

2


You’re duplicating code unnecessarily.

Some suggestions:

This must be in HTML and not in Javascript:

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

This way ensures that there is no FOUC effect, or by errors in JS this will fail and Submit is enabled.


This function is only used once, when the page is loading, after that it is unnecessary:

$(document).ready(function() { 

Use $(document).keyup(function() { Multiple times will cause you to call over and over again, no need. Avoid this by using more specific selectors, or by placing logic within it (and unique) $(document).keyup(function() {


That said, a suggestion:

$(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}/);
  });
});

  • About Regexp for CNPJ there are already other questions about this with good answers: https://answall.com/search?tab=votes&q=cnpj%20regex

0

The expression $(document).ready(function() { ... is executed when the page finishes loading, so you only need to declare that snippet once.

For your code to work, try to do it this way.

//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);  
    }
}

Browser other questions tagged

You are not signed in. Login or sign up in order to post.