Force user to mark at least 5 input type number fields

Question

I’m making a website with counter with a button more and less... All are input number type with limit of 0 to 5 each input.

There are 33 input type numbers, of which 33 the user will have to choose at least 5. I see disabling the Submit button if at least 5 input is not chosen. or when clicking on the Ubmit warning that the user must choose at least 5 input...

I have a code that I took and changed to number ... era type text... with type text worked more my project this all input with number. And I couldn’t make it work,

// Mantém os inputs em cache:
var inputs = $('input');

// Chama a função de verificação quando as entradas forem modificadas
// Usei o 'change', mas 'keyup' ou 'keydown' são também eventos úteis aqui
inputs.on('keyup', verificarInputs);

function verificarInputs() {
    var preenchidos = true;  // assumir que estão preenchidos
    inputs.each(function () {
        // verificar um a um e passar a false se algum falhar
        // no lugar do if pode-se usar alguma função de validação, regex ou outros
        if (!this.value) {
          preenchidos = false;
          // parar o loop, evitando que mais inputs sejam verificados sem necessidade
          return false;
        }
    });
    // Habilite, ou não, o <button>, dependendo da variável:
    $('button').prop('disabled', !preenchidos);
}

<input type="number" />
<input type="number" />
<input type="number" />
<button type="button" id="botao" disabled="disabled">Botão</button>

I got two kind...

$('input').change(function() {
    
    //habilita/desabilita botão
    $('button').prop('disabled', 
            $('input[type="number"]:checked').length < 5);
    
});

<input type="number" name="group[001]" id="1">

<input type="number" name="group[002]" id="2">

<input type="number" name="group[003]" id="3">

<input type="number" name="group[004]" id="4">

<input type="number" name="group[005]" id="5">

<input type="number" name="group[006]" id="6">

<input type="number" name="group[007]" id="7">

<input type="number" name="group[008]" id="8">

<input type="number" name="group[009]" id="9">
    <hr/>
    <button disabled>Botão</button>
   

Answer 1

Thank you Rogerio Santos helped me a lot... Thank you very much ... But it’s not finished yet :| ... I made a small modification too.. In the keyup I changed to 'change' and in the empty value I put zero ... because the input starts in 0 is with value="0"... Mais vamos la. As I said I am a javascript negation, and in the project there are separate classes I will implement this code in just a few classes.. but I don’t know for sure how to do it ... I made this modification in the code but it didn’t work..

	var inputs = $('.grupo');

	inputs.on('change', verificarInputs);

	function verificarInputs() {

	    var preenchidos = true;  
	    var totalPreenchidos = 0; 
	    inputs.each(function () {
	  

	        if (this.value == "0" && totalPreenchidos < 5) { 

	          preenchidos = false;
	      
	          return false;
	        }

	        totalPreenchidos++; 
	    });
		   
	    $('.botaoenviar').prop('disabled', !preenchidos);
	}
		
	})(jQuery);

<div class="grupo">

<input type="number" value="0">

<input type="number" value="0">

<input type="number" value="0">

<input type="number" value="0">

<input type="number" value="0">

<input type="number" value="0">

<input type="number" value="0">

<input type="number" value="0">

</div>

    <hr/>
    <button class="botaoenviar" disabled>Botão</button>

Answer 2

There’s an error in the check, I changed some lines:

var inputs = $('input');

// Chama a função de verificação quando as entradas forem modificadas
// Usei o 'change', mas 'keyup' ou 'keydown' são também eventos úteis aqui
inputs.on('keyup', verificarInputs);

function verificarInputs() {

    var preenchidos = true;  // assumir que estão preenchidos
    var totalPreenchidos = 0; // numero total de preenchidos <--- adicionei esta variavel
    inputs.each(function () {
    // verificar um a um e passar a false se algum falhar
        // no lugar do if pode-se usar alguma função de validação, regex ou outros


        if (this.value == "" && totalPreenchidos < 5) { //<-- se o valor for diferente de vazio, ele não retorna um bool como estava, e verica se tem ao menos 5 preenchidos

          preenchidos = false;
          // parar o loop, evitando que mais inputs sejam verificados sem necessidade
          return false;
        }

        totalPreenchidos++; // passou então está preenchido, soma 1
    });
    // Habilite, ou não, o <button>, dependendo da variável:
    $('button').prop('disabled', !preenchidos);
}

The html is the same

<input type="number" name="group[001]" id="1">

<input type="number" name="group[002]" id="2">

<input type="number" name="group[003]" id="3">

<input type="number" name="group[004]" id="4">

<input type="number" name="group[005]" id="5">

<input type="number" name="group[006]" id="6">

<input type="number" name="group[007]" id="7">

<input type="number" name="group[008]" id="8">

<input type="number" name="group[009]" id="9">
    <hr/>
    <button disabled>Botão</button>