darlan_machado 12 de abr. de 2019 1 like
Você tem algumas opções.
<head>
<script>
function validacao(id) {
var elemento = document.getElementById(id).value;
//Faz as validações aqui
}
</script>
</head>
<body>
Entendeu?
EDIT:
< input type = "text" onblur = "validacao('id_deste_elemento');" id = "id_deste_elemento" / >
Davi_Souza 12 de abr. de 2019
@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
darlan_machado 12 de abr. de 2019
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.
Davi_Souza 12 de abr. de 2019
No exemplo que mandeu eu consigo colocar a função dentro da div?
darlan_machado 12 de abr. de 2019
Consegue. Mas, aí, vai precisar fazer uma função para cada input.
Davi_Souza 12 de abr. de 2019
Entendi, pesse que tinha como criar uma function da Div para fazer para todos os inputs
Lucas_Camara 12 de abr. de 2019 1 like
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.
Davi_Souza 15 de abr. de 2019
Davi_Souza 15 de abr. de 2019 1 like
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 );
}
}
Lucas_Camara 15 de abr. de 2019
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.
forna 18 de abr. de 2019 1 like
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" );
