Validar solo letras en Javascript

publicado por: Anonymous

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; 
    }

solución

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:

_x000D_

_x000D_

    // La siguiente funcion valida el elemento input_x000D_
    function validar() {_x000D_
      // Variable que usaremos para determinar si el input es valido_x000D_
      let isValid = false;_x000D_
_x000D_
      // El input que queremos validar_x000D_
      const input = document.forms['validationForm']['letras'];_x000D_
_x000D_
      //El div con el mensaje de advertencia:_x000D_
      const message = document.getElementById('message');_x000D_
_x000D_
      input.willValidate = false;_x000D_
_x000D_
      // El tamaño maximo para nuestro input_x000D_
      const maximo = 35;_x000D_
_x000D_
      // El pattern que vamos a comprobar_x000D_
      const pattern = new RegExp('^[A-Z]+$', 'i');_x000D_
_x000D_
      // Primera validacion, si input esta vacio entonces no es valido_x000D_
      if(!input.value) {_x000D_
        isValid = false;_x000D_
      } else {_x000D_
        // Segunda validacion, si input es mayor que 35_x000D_
        if(input.value.length > maximo) {_x000D_
          isValid = false;_x000D_
        } else {_x000D_
          // Tercera validacion, si input contiene caracteres diferentes a los permitidos_x000D_
          if(!pattern.test(input.value)){ _x000D_
          // Si queremos agregar letras acentuadas y/o letra ñ debemos usar_x000D_
          // codigos de Unicode (ejemplo: Ñ: u00D1  ñ: u00F1)_x000D_
            isValid = false;_x000D_
          } else {_x000D_
            // Si pasamos todas la validaciones anteriores, entonces el input es valido_x000D_
            isValid = true;_x000D_
          }_x000D_
        }_x000D_
      }_x000D_
_x000D_
      //Ahora coloreamos el borde de nuestro input_x000D_
      if(!isValid) {_x000D_
        // rojo: no es valido_x000D_
        input.style.borderColor = 'salmon'; // me parece que 'salmon' es un poco menos agresivo que 'red'_x000D_
        // mostramos mensaje_x000D_
        message.hidden = false;_x000D_
      } else {_x000D_
        // verde: si es valido_x000D_
        input.style.borderColor = 'palegreen'; // 'palegreen' se ve mejor que 'green' en mi opinion_x000D_
        // ocultamos mensaje;_x000D_
        message.hidden = true;_x000D_
      }_x000D_
_x000D_
      // devolvemos el valor de isValid_x000D_
      return isValid;_x000D_
    }_x000D_
_x000D_
    // Por último, nuestra función que verifica si el campo es válido antes de realizar cualquier otra acción._x000D_
    function verificar() {_x000D_
      const valido = validar();_x000D_
      if (!valido) {_x000D_
        alert('El campo no es válido.');_x000D_
      } else {_x000D_
        alert('El campo es válido');_x000D_
      }_x000D_
    }

_x000D_

<form id="validationForm" name="validationForm">_x000D_
    <label forHTML="letras">Introduzca solo letras:</label>_x000D_
    <br>_x000D_
    <input type="text" id="letras" name="letras" onkeyup="validar()" onblur="validar()" />_x000D_
    <div id="message" style="position: absolute; left: 10px; top: 50px; background-color: Yellow; z-index: 10" hidden>_x000D_
      Introduzca solo letras (A-Z) o (a-z). Máximo 35 caracteres._x000D_
    </div>_x000D_
    <br>_x000D_
    <br>_x000D_
    <button type="button" onclick="verificar()">Validar</button>_x000D_
  </form>

_x000D_

_x000D_

_x000D_

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:

_x000D_

_x000D_

function validar2() {_x000D_
  const input = document.getElementById('campo');_x000D_
  if(!input.checkValidity()) {_x000D_
    alert('El campo no es válido.');_x000D_
  } else {_x000D_
    alert('El campo es válido.');_x000D_
  }_x000D_
}

_x000D_

<form id="validationHTML" name="validationHTML">_x000D_
    <label forHTML="campo">Introduzca solo letras:</label>_x000D_
    <br>_x000D_
    <input type="text" id="campo" name="campo" pattern="^[A-Za-z]+$" maxlength="35" required />_x000D_
    <button type="button" onclick="validar2()">Validar</button>_x000D_
  </form>

_x000D_

_x000D_

_x000D_

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

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *