5

Al querer ingresar un dato quiero que el border del textbox se ponga de color rojo, pero no funciona, como puedo arreglar el codigo?

function nombre() 
{
    //obteniendo el valor que se puso en el campo text del formulario
    caja1= document.getElementById("txtnombre").value;

    //la condición

    // if (caja1=="") 
    // {
    //   alert("Esta vacío")
    //   return false;
    // }

    // else 

    if (caja1.length == 35 || /^\s+$/.test(caja1)) 
    {
        alert("Sólo se permiten de 35 letras para el nombre")
        return false;
    }

    else if (caja1.length <= 35 || /^\s+$/.test(caja1)) 
    {
        document.getElementById("txtnombre").focus();
        document.getElementById("txtnombre").style.borderColor="green";
        return true;    
    }

    else if (/^([0-9])*$/.test(caja1))
    {
        alert("El valor " + caja1 + " no es una letra");
        document.getElementById("txtnombre").focus();
        document.getElementById("txtnombre").style.borderColor="red";
        return false; 
    }
4
  • No entiendo tu pregunta. ¿Quieres usar la validación de HTML? ¿O vas a implementar tu propia validación? Además, cada vez que se quiera ingresar un dato, ¿se va a poner rojo el borde? Commented el 16 ene. 2019 a las 19:39
  • Mi propia validacion, cada vez que metas un dato, por ejemplo, si metes un numero se pondría de color rojo el borde (esto para que el usuario sepa que esta haciendo mal) Commented el 16 ene. 2019 a las 19:41
  • Ok. Necesitas una validación de solo caracteres alfabéticos (A-Z) y (a-z). O sea mayúsculas y minúsculas? Commented el 16 ene. 2019 a las 20:39
  • Exacto, las que he escribido no han funcionado Commented el 16 ene. 2019 a las 20:40

5 respuestas 5

8

Para realizar la validación que necesitas puedes usar tu propia función de validación o puedes usar la validación de HTML5.

Lo que tu deseas lo puedes lograr con la validación de HTML5 sin complicarte mucho la vida, solo debes poner 3 atributos a tu etiqueta input.

Sin embargo, ya que deseas realizar tu propia validación, aqui te muestro como podrías hacerla.

PROBLEMA

Validar un campo input de HTML5 con las siguientes condiciones:

  1. El valor de input debe ser diferente de cero.
  2. El valor de input de tener un máximo de 35 caracteres.
  3. El valor de input sólo debe contener caracteres del alfabeto (letra 'A' hasta la 'Z', en mayúsculas y/o minúsculas. El resto de caracteres no serán válidos.
  4. Si el campo es válido se debe colorear el borde de verde. Si no es válido se debe colorear el borde de rojo.

SOLUCIÓN

Usando nuestra propia validación:

Para lograr lo que nos proponemos vamos a usar una expresión regular. Puedes encontrar información de expresiones regulares en JavaScript RegExp Reference.

La expresión regular que usaremos viene dada de la siguiente forma:

/^[A-Z]+$/i

Donde:

^ indica que el patrón debe iniciar con los caracteres dentro de los corchetes

[A-Z] indica que los caracteres admitidos son letras del alfabeto

+ indica que los caracteres dentro de los corchetes se pueden repetir

$ indica que el patrón finaliza con los caracteres que están dentro de los corchetes.

i indica que validaremos letras mayúsculas y minúsculas (case-insensitive)

Así, una posible implementación para nuestra validación sería la siguiente:

    // La siguiente funcion valida el elemento input
    function validar() {
      // Variable que usaremos para determinar si el input es valido
      let isValid = false;

      // El input que queremos validar
      const input = document.forms['validationForm']['letras'];

      //El div con el mensaje de advertencia:
      const message = document.getElementById('message');

      input.willValidate = false;

      // El tamaño maximo para nuestro input
      const maximo = 35;

      // El pattern que vamos a comprobar
      const pattern = new RegExp('^[A-Z]+$', 'i');

      // Primera validacion, si input esta vacio entonces no es valido
      if(!input.value) {
        isValid = false;
      } else {
        // Segunda validacion, si input es mayor que 35
        if(input.value.length > maximo) {
          isValid = false;
        } else {
          // Tercera validacion, si input contiene caracteres diferentes a los permitidos
          if(!pattern.test(input.value)){ 
          // Si queremos agregar letras acentuadas y/o letra ñ debemos usar
          // codigos de Unicode (ejemplo: Ñ: \u00D1  ñ: \u00F1)
            isValid = false;
          } else {
            // Si pasamos todas la validaciones anteriores, entonces el input es valido
            isValid = true;
          }
        }
      }

      //Ahora coloreamos el borde de nuestro input
      if(!isValid) {
        // rojo: no es valido
        input.style.borderColor = 'salmon'; // me parece que 'salmon' es un poco menos agresivo que 'red'
        // mostramos mensaje
        message.hidden = false;
      } else {
        // verde: si es valido
        input.style.borderColor = 'palegreen'; // 'palegreen' se ve mejor que 'green' en mi opinion
        // ocultamos mensaje;
        message.hidden = true;
      }

      // devolvemos el valor de isValid
      return isValid;
    }

    // Por último, nuestra función que verifica si el campo es válido antes de realizar cualquier otra acción.
    function verificar() {
      const valido = validar();
      if (!valido) {
        alert('El campo no es válido.');
      } else {
        alert('El campo es válido');
      }
    }
<form id="validationForm" name="validationForm">
    <label forHTML="letras">Introduzca solo letras:</label>
    <br>
    <input type="text" id="letras" name="letras" onkeyup="validar()" onblur="validar()" />
    <div id="message" style="position: absolute; left: 10px; top: 50px; background-color: Yellow; z-index: 10" hidden>
      Introduzca solo letras (A-Z) o (a-z). Máximo 35 caracteres.
    </div>
    <br>
    <br>
    <button type="button" onclick="verificar()">Validar</button>
  </form>

El código HTML que incluyo es un ejemplo básico para mostrar la validación de un campo input usando nuestra función.

He puesto un elemento div flotante que se oculta o se muestra según la validez del input para mostrar un mensaje. Los estilos están "hardcodeados". Se puede realizar algo más elaborado, pero eso va más allá de la intención de este ejemplo.

Usando la validación de HTML5:

Como te comenté anteriormente, la validación en HTML5 nos alivia la tarea de tener que escribir nuestra propia validación. En la mayoría de los casos es suficiente usar la validación de HTML5. Sin embargo, habrá casos en que esta validación no será suficiente.

Para este caso en particular, HTML5 nos provee de toda la validación que requerimos, un ejemplo de cómo pudiera quedar nuestro código es como sigue:

function validar2() {
  const input = document.getElementById('campo');
  if(!input.checkValidity()) {
    alert('El campo no es válido.');
  } else {
    alert('El campo es válido.');
  }
}
<form id="validationHTML" name="validationHTML">
    <label forHTML="campo">Introduzca solo letras:</label>
    <br>
    <input type="text" id="campo" name="campo" pattern="^[A-Za-z]+$" maxlength="35" required />
    <button type="button" onclick="validar2()">Validar</button>
  </form>

Aqui podemos ver en acción la validación de HTML5, de una manera muy básica.

Con esto solo quiero mostrar que mucha de la validación de elementos input se la podemos dejar al navegador.

Sin embargo, si deseamos personalizar el aspecto de la validación de HTML5, tendremos que usar algo de CSS.

Espero que esto te sirva de ejemplo y te ayude a resolver tu problema.

REFERENCIAS

Javascript Validation API

HTML input Attributes

Javascript RegExp Reference

Un ejemplo de cómo podemos personalizar la validación de HTML5 usando CSS:

Styling Form Inputs Validity in CSS

2
  • en esta validacion que indicas, se admiten letras con tildes?
    – Enzo
    Commented el 4 sept. 2020 a las 20:49
  • @Enzo, no valida caracteres con tilde. Para validar los mismos debes incluirlos en el patrón de expresión regular, por ejemplo en mayúsculas: [A-ZÁÉÍÓÚ]. Lo mismo si vas a incluir diéresis o la letra Ñ. Saludos Commented el 5 sept. 2020 a las 6:12
0

Necesitas cambiar tus condiciones de la siguiente manera:

if (caja1.length >= 35) 
{
    alert("Sólo se permiten de 35 letras para el nombre")
    return false;
}

else if (/^\s+$/.test(caja1)) 
{
    document.getElementById("txtnombre").focus();
    document.getElementById("txtnombre").style.borderColor="green";
    return true;    
}

else if (/^([0-9])*$/.test(caja1))
{
    alert("El valor " + caja1 + " no es una letra");
    document.getElementById("txtnombre").focus();
    document.getElementById("txtnombre").style.borderColor="red";
    return false; 
}
0

Esto funciona, pero solo es para validar que acepte letras, letras tildadas y espacios, el código está hecho en TypeScript

public static onlyCharacters(value: any): boolean {
    let isValid = false;
    value.willValidate = false;
    const pattern = new RegExp('^[A-ZÁÉÍÓÚÑ ]+$', 'i');
    if (pattern.test(value.key)){
      isValid = true;
    }
    return isValid;
  }

1
  • dos años tarde pero gracias bro jajaja Commented el 9 nov. 2020 a las 0:04
0

Aplicando el siguiente código CSS se mostrará un fondo verde o rojo, dependiendo de si cumple o no la validación, respectivamente:

input:valid, textarea:valid { background: green; }

input:invalid, textarea:invalid { background: red; }

link

0
    for (let i = 0; i < nombre.length-1; i++) { // bucle para recorrer toda la palabra de la variable nombre
        for (let f = 0; f < 10; f++) { // bucla para buscar de 0 al 9 en la palabra
                    if (nombre.indexOf(f) > -1){ // si encuentra un numero del 0 al 9 pide ingresar de nuevo
                    nombre = prompt("Ingrese su nombre sin numeros ")                    
                }
            }  
        }
2
  • Hola Javier, bienvenido, gracias por tu aporte, mira como responder para evitar votos negativos y/o que tu repuesta sea eliminada. Aprovecha y haz el recorrido de Bienvenida para entender mejor cómo funcionamos y de paso obtener tu primer medalla!, tu respuesta es solo código, esperamos que las respuestas den una breve explicación de como resuelven el problema. Commented el 16 feb. 2023 a las 7:37
  • Pulsa en editar y describe cómo este código responde a la pregunta (no lo coloques solo en comentarios). Lee Cómo responder y haz el recorrido de bienvenida para conocer el funcionamiento del sitio.
    – padaleiana
    Commented el 16 feb. 2023 a las 10:04

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.