enable and disable submit according to input field validity

Question

enable and disable submit according to input field validity

Navigation

#1 by (2 votes)
#2 by (0 votes)

1

I have a form within a modal, it serves for company registration. I'm trying to make the submit button stay disabled until the company's zip and cnpj are typed in the correct way. I've done a similar function for a login field, but I can not 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 put only the code to disable the submit, the page already loads with the blocked submit (like I want). But when I put the rest of the code to enable the submit if the value of the field is equal to the regex that I set, the error (the page already loads with the released submit). I do not know if the defect is in the regex or where, when I did this to validate a login form it worked. Besides that problem, does anyone know what a cnpj regex would look like? I've tried this: [0-9] {2}.? [0-9] {3}.? [0-9] {3} /? [0-9] {4} -? [0-9] 2}

javascript jquery

asked by anonymous 23.04.2017 / 21:10

2 answers

0

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

For your code to work, try doing the following.

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

23.04.2017 / 21:24

What are the ascii codes of the directional arrows on the keyboard? How to include if statement when adding a new object in a list?

score 2 · Accepted Answer

You're duplicating code unnecessarily.

Some suggestions:

This should be in HTML rather than in JavaScript:

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

In this way guarantors that there is no effect type FOUC, or for errors in JS this will fail and the submit is enabled.

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

$(document).ready(function() {

Using $(document).keyup(function() { multiple times will cause you to call functions over and over without any need. Avoid this by using more specific selectors, or by putting logic within the same (and only) $(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}/);
  });
});