Função de validação

[mruoppolo 14]

Olá, tudo bem?

Estou com um problema em uma função de validação, acontece o seguinte:

Eu tenho 15 inputs e dentro delas não pode ser colocados alguns números que tenho salvos em um array, quando um desses números é colocado o botão do formulário fica desabilitado, isto funciona perfeitamente, porém caso o usuário simplesmente coloque um número permitido (número que não consta no array de números proibidos) na próxima input o botão volta a funcionar.

Isso não pode acontecer, ele precisa ficar desabilitado até o usuário modificar o número proibido que foi colocado na input.

você sabe como posso fazer??

A função é esta:

//Funções de validação
var $numbers = document.querySelectorAll('input[name="numbers[]"]');
var $form = document.getElementById('form-numbers');
$numbers = [].slice.call($numbers);
var NOT_ALLOWED_NUMBERS = ['5','6','7','12','13','14','19','20','21'];

$numbers.forEach(function($number){
  $number.addEventListener('keyup', _validate);
});

function _validate() {
  var isNotAllowed = NOT_ALLOWED_NUMBERS.indexOf(this.value) !== -1;

  var userNumbers = $numbers.map(function(n) {
    return n.value;
  });

  console.log('userNumbers', userNumbers);

  if(isNotAllowed) {
    this.classList.add('error');
    document.getElementById("gerar").disabled=true;
  } else {
    this.classList.remove('error');
    document.getElementById("gerar").disabled=false;
  }
}

O formulário é este:

<form id="form-numbers" action="">
		<table class="table table-bordered">
			<tr>
				<td><input type="text" class="form-control" name="numbers[]" id="a"></td>
				<td><input type="text" class="form-control" name="numbers[]" id="b"></td>
				<td><input type="text" class="form-control" name="numbers[]" id="c"></td>
				<td><input type="text" class="form-control" name="numbers[]" id="d"></td>
				<td><input type="text" class="form-control" name="numbers[]" id="e"></td>
				<td><input type="text" class="form-control" name="numbers[]" id="f"></td>
				<td><input type="text" class="form-control" name="numbers[]" id="g"></td>
				<td><input type="text" class="form-control" name="numbers[]" id="h"></td>
				<td><input type="text" class="form-control" name="numbers[]" id="i"></td>
				<td><input type="text" class="form-control" name="numbers[]" id="j"></td>
				<td><input type="text" class="form-control" name="numbers[]" id="k"></td>
				<td><input type="text" class="form-control" name="numbers[]" id="l"></td>
				<td><input type="text" class="form-control" name="numbers[]" id="m"></td>
				<td><input type="text" class="form-control" name="numbers[]" id="n"></td>
			</tr>
		</table>
	</div>
	<button class="btn btn-success" onclick="gerarCombinacoes1();" id="gerar">GERAR COMBINAÇÕES</button>
	<button class="btn btn-danger" onclick="limparCombinacoes1();">LIMPAR</button>
	<button class="btn btn-warning" onclick="imprimir();">IMPRIMIR</button>
	<button class="btn btn-default" onclick="salvar();">SALVAR</button>
	<br><br>
</form>

Você sabe como fazer?

Obrigado :D

[Guilherme Luiz 41]

Você terá que verificar input por input.

O que está te "ferrando" é isso aqui

var $form = document.getElementById('form-numbers');

Pelo que consegui entender o seu código, você faz a verificação certinha no input 1 por exemplo, mas como o input 2 tem o mesmo nome, caso ele seja validado, todos os inputs também serão validados já que todos possuem o mesmo nome.

O que você pode fazer é verificar pelo ID de cada input através de um FOR() para automatizar o código ou então verificar um por um e condicionar no IF cada um...

Ta ai a idéia :) Mãos a obra!

[mruoppolo 14]

Deixa eu tentar colocar em prática aqui pra ver como fica.

valeu Guilherme já te falo ;)

[mruoppolo 14]

Cara, desculpa, mas não tenho nem ideia de como mexer nesse código, poderia apenas me dar um exemplo de como faço para pegar todas aquelas inputs pela id, porque eu sei pegar uma, mas todas juntas não tenho ideia.