Validação JS

Front-end JavaScript
#1

Boa tarde!

Estou iniciando no Js na verdade do mundo do desenvolvimento, e gostaria de uma ajuda.

Seguinte fiz um sistema para soma de nota e estou tentando fazer a seguinte validação Se o valor do campo for maior que 10 então ele mande um alert.

Consegui fazer para 1 campo como fazer para todos os campos ?

Tentei fazer mas não deu certo. Desde já muito obrigado :smiley::smiley:

//HTML

<div id="notascampos" class="notascampos1" >
                <label>Primeira nota:</label>
                <input type="text" id="cal_nt1" onBlur="validacao()" class="cal_nota" maxlength="2" min="0" max="10"> 
                <label>Segunda nota:</label>
                <input type="text" id="cal_nt2"  class="cal_nota" maxlength="2">
            
            </div>

// JS
           function validacao(){
            var v5 = document.getElementById("cal_nt1").value;

          //  for(var i = 0; i <4;i++){}
            if(v5 > 10){
            alert("Número inválido");
            console.log(v5);
        }
}
#2

Você tem algumas opções.
A que eu mais gosto é isolar o script no header (ou em outro arquivo) e tornar a função apta a tratar qualquer elemento html.

<head>
    <script>
         function validacao(id) {
               var elemento = document.getElementById(id).value;
               //Faz as validações aqui
        }
   </script>
</head>
<body>

Entendeu?

EDIT:
Ia esquecendo. Para chamar a função, em cada elemento, inclua um onblur

<input type="text" onblur="validacao('id_deste_elemento');" id="id_deste_elemento"/>
1 curtida
#3

@darlan_machado nesse caso vou tem que colocar um evento para cada input?

Pq eu consegui fazer a chamada de um evento em um input

#4

A chamada da função deve está em cada input que será validado. Você só muda o id que será passado como parâmetro, para que a validação ocorra no respectivo input em questão.

#5

No exemplo que mandeu eu consigo colocar a função dentro da div?

#6

Consegue. Mas, aí, vai precisar fazer uma função para cada input.

#7

Entendi, pesse que tinha como criar uma function da Div para fazer para todos os inputs

#8

Segue um exemplo mais elaborado:

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>JS Validation</title>
</head>

<body>
	<form>
		<label>Primeira nota:</label>
		<input type="text" data-limit="10"> 
		
		<label>Segunda nota:</label>
		<input type="text" data-limit="20">
	</form>
	
	<script>
		var inputs = document.querySelectorAll('INPUT[type=text]');
		
		inputs.forEach(input => {
			input.addEventListener('keyup', (event) => {
				if(input.value > input.dataset.limit) {
					alert("Número inválido");
					input.value = null;
				}
			});
		});
	</script>
</body>

</html>

Esse exemplo valida o valor de cada campo de acordo com o atributo data-limit de cada input.

1 curtida
#9

@Lucas_Camara Muito obrigado pela ajuda, vou dar uma estuda nesse exemplo, como sou iniciante isso é novidade, esse seu código é em Ajax? :smiley::smiley::smiley:

#10

Pessoal eu achei uma solução boa. Quem estiver aprendendo e quiser saber segue o código.

HTML

 <div id="notascampos" class="notascampos1" >
                <label>Primeira nota:</label>
                <input type="text" id="cal_nt1" onBlur="validacao('cal_nt1')" class="cal_nota" maxlength="2" min="0" max="10"> 
                <label>Segunda nota:</label>
                <input type="text" id="cal_nt2" onBlur="validacao('cal_nt2')" class="cal_nota" maxlength="2">
            
            </div>

            <div id="notascampos2" class="notascampos1">
                <label>Terceira nota:</label>
                <input type="text" id="cal_nt3" onBlur="validacao('cal_nt3')" class="cal_nota" maxlength="2">
                <label id="quartocampo">Quarta nota:</label>
                <input type="text" id="cal_nt4" onBlur="validacao('cal_nt4')" class="cal_nota" maxlength="2">
             </div>

JS

    function validacao(id){
        var v5 = document.getElementById(id).value;


        if(v5 > 10){
        alert("Número inválido");
        console.log(v5);
    }
}
1 curtida
#11

Não usa ajax não. É uma forma genérica de trabalhar validação. O bom é que vc pode validar qualquer a entrada de dados de forma bem prática.

#12

Uma dica legal para escrever menos na hora de fazer seleção de elementos html, veja se entende:

//Let e uma boa pratica para criar variáveis que estejam dentro de funções
let $ = document.querySelector.bind(document);

Com isso você pode fazer suas seleções de maneira mais simples, como é feito no Jquery. Exemplo:

$("cal_nt3");
$("cal_nt4");
1 curtida