Validate field with Javascript [duplicate]

0

Good morning, my doubt is as follows. How can I validate a field with Javascript ?

My code:

 function escribir_nombre(){
   var nombre = document.getElementById("nombre").value;
   if(nombre<10){
       alert("El nombre tiene que tener más de 3 letras");
    }else{
      document.getElementById("resultado").innerHTML=nombre;
     }
 }
<form method="POST" id="formulario" name="formulario" action="">
    Nombre <input type="text" id="nombre" name="nombre">
</form>

    <input type="submit" id="enviar" name="enviar" value="enviar" onclick="escribir_nombre()">
    <div id="resultado"></div>
    
asked by Jopimar 12.06.2017 в 20:35
source

3 answers

2

If you want to validate that the length is greater than 3 you should check the length property of the value:

function escribir_nombre(){
   var nombre = document.getElementById("nombre").value;
   if(nombre.length < 4){
      alert("El nombre tiene que tener más de 3 letras");
   }else{
      document.getElementById("resultado").innerHTML=nombre;
   }
}
<form method="POST" id="formulario" name="formulario" action="">
    Nombre <input type="text" id="nombre" name="nombre">
</form>

    <button id="enviar" name="enviar" onclick="escribir_nombre()">enviar</button>
    <div id="resultado"></div>
    
answered by 12.06.2017 / 20:41
source
1

Actually your problem is that you are comparing a string with a number so the condition will always go to the condition of else , since it will always be false.

You should obtain the length of the string to be able to compare it (since the latter will be a number), with the attribute length .

Your modified example:

function escribir_nombre(){
   var nombre = document.getElementById("nombre").value;
   if(nombre.length <10){
       alert("El nombre tiene que tener más de 10 letras");
    }else{
      document.getElementById("resultado").innerHTML=nombre;
     }
 }
<form method="POST" id="formulario" name="formulario" action="">
    Nombre <input type="text" id="nombre" name="nombre">
</form>

    <input type="submit" id="enviar" name="enviar" value="enviar" onclick="escribir_nombre()">
    <div id="resultado"></div>
    
answered by 12.06.2017 в 20:42
0

This snippet of code could serve you. The validation is done with the java-script and the native validation of html5.

function condicion(t) {
  var field = t;
  if (t.value.length <= 5) { //puedes personalizar el mensaje por el que quieras.
    field.setCustomValidity("Debe tener al mas 5 caracteres");
  } else {
    field.setCustomValidity("");
  }
}
function enviar(e){
  e.preventDefault();
  alert("se envio lo valores");
  e.target.reset();
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <form onsubmit="enviar(event)">
    Nombre <input type="text" id="nombre" name="nombre" onkeyup="condicion(this)" required>
    <input type="submit">
  </form>


  <div id="resultado"></div>
</body>


</html>
    
answered by 13.06.2017 в 00:33