Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

mruoppolo

Validação de campos com JS

Por , em Javascript

Recommended Posts

mruoppolo    14

mruoppolo
Postado

Olá, tudo bem?

Eu tenho os seguintes inputs:

<div id="formInput" class="table-responsive">
	<table class="table table-bordered">
		<tr>
			<td><input type="text" class="form-control" id="a"></td>
			<td><input type="text" class="form-control" id="b"></td>
			<td><input type="text" class="form-control" id="c"></td>
			<td><input type="text" class="form-control" id="d"></td>
			<td><input type="text" class="form-control" id="e"></td>
			<td><input type="text" class="form-control" id="f"></td>
			<td><input type="text" class="form-control" id="g"></td>
			<td><input type="text" class="form-control" id="h"></td>
			<td><input type="text" class="form-control" id="i"></td>
			<td><input type="text" class="form-control" id="j"></td>
			<td><input type="text" class="form-control" id="k"></td>
			<td><input type="text" class="form-control" id="l"></td>
			<td><input type="text" class="form-control" id="m"></td>
			<td><input type="text" class="form-control" id="n"></td>
		</tr>
	</table>
</div>

Eu preciso que os números que serão inseridos nestas inputs não sejam repetidos, por exemplo, se o usuário inserir 9 em qualquer uma delas, ele não pode colocar 9 de novo e também preciso que o sistema não permite que os números 5,6,7,12,13,14,19,20 e 21 sejam inseridos nestes campos também.

Ou seja não pode ter nenhum destes números e também não pode repetir o número inserido.

Você sabe como fazer?

Obrigado :D

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Segue uma idéia para você:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
<style>
.error {
  border: 1px solid red;
}
</style>
</head>
<body>

<form id="form-numbers" action="">
<table class="table table-bordered">
  <tr>
    <td><input type="text" class="form-control" name="numbers[]" /></td>
    <td><input type="text" class="form-control" name="numbers[]" /></td>
    <td><input type="text" class="form-control" name="numbers[]" /></td>
    <td><input type="text" class="form-control" name="numbers[]" /></td>
  </tr>
</table>
<input type="submit" value="enviar">
</form>

<script>
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'];

$form.addEventListener('submit', function(event) {
  event.preventDefault();

  var hasAnyNotAllowed = $numbers.find(function(n) {
    return NOT_ALLOWED_NUMBERS.indexOf(n.value) !== -1;
  });
  var userNumbers = $numbers.map(function(n) {
    return n.value;
  });

  console.log('userNumbers', userNumbers);

  if(hasAnyNotAllowed) {
    hasAnyNotAllowed.classList.add('error');
    // hasAnyNotAllowed.value = '';
    alert('Número não permitido');
  }

});
</script>
</body>
</html>
agora você pode loopar os userNumbers e ver se tem repetidos.

pode apagar o campo, colocar a borda de erro, tirar a borda..

Compartilhar este post

Link para o post
Compartilhar em outros sites

mruoppolo    14

mruoppolo
Postado

Então o problema é que este formulário ele nunca recebe submit, ele na verdade quando clica no botão pra gerar combinações ele chama uma função no evento onclick, eu mudei o eventlistener para keyup mas ele não funcionou, teria como modificar para ele fazer a validação ao digitar em cada input?

Obrigado

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Ai é até mais fácil..

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
<style>
.error {
  border: 1px solid red;
}
</style>
</head>
<body>

<form id="form-numbers" action="">
<table class="table table-bordered">
  <tr>
    <td><input type="text" class="form-control" name="numbers[]" /></td>
    <td><input type="text" class="form-control" name="numbers[]" /></td>
    <td><input type="text" class="form-control" name="numbers[]" /></td>
    <td><input type="text" class="form-control" name="numbers[]" /></td>
  </tr>
</table>
<input type="submit" value="enviar">
</form>

<script>
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');
    // isNotAllowed.value = '';
    alert('Número não permitido');
  } else {
    this.classList.remove('error');
  }
}
</script>
</body>
</html>
segue a mesma idéia, agora você pode pegar o userNumbers e ver se tem repetidos.

Compartilhar este post

Link para o post
Compartilhar em outros sites

mruoppolo    14

mruoppolo
Postado

Cara funcionou, porém ele ainda deixa colocar números repetidos nas inputs, por exemplo, se eu coloco um 4 em uma input eu não posso colocar 4 na outra, desculpa estar te perguntando, é que não manjo mesmo de javascript

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

yep, foi o que eu disse... não implementei isso, mas já tem tudo ai que você precisa para fazer.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito