enable and disable Ubmit according to input field validity

Question

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}

Answer 1

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

Answer 2

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