2

Necesito validar el largo de un input y usé parte del código que está aquí por eso lo pregunto acá.

<input type="text" name="rut" required oninput="checkRut(this)" placeholder="Rut">
<input type="text" name="nombre" required oninput="checklargo(this)" placeholder="Nombre">

Este es el html y su input que es un formulario igual.

Lo que viene a continuación es la función:

function checklargo(nombre) {
var palabra=nombre.value;   
    alert(palabra);

if(palabra.length > 5) {nombre.setCustomValidity("Excede el largo permitido"); return false;}

}

Le puse el alert para saber que iba conteniendo a cada minuto la variable y como funcionaría el if.

Cuando cargo la primera vez el formulario funciona, luego de marcar el primer error correctamente no deja de marcar error aunque esté correcto.

Y el validarut de este hilo funciona perfecto y no sé porque el mío no, si es la misma idea.

Saludos y gracias.

2
  • 1
    Ayudaría que agregues el mensaje de error
    – user128299
    Commented el 4 sept. 2020 a las 4:48
  • Alguna de las respuesta te ayudó?. Si es así, márcala como respuesta, si no, déjanos un comentario para saber como te podemos seguir ayudando. Haz el tour para que conozcas como funciona la comunidad.
    – DjCrazy
    Commented el 7 sept. 2020 a las 21:48

2 respuestas 2

2

Puedes usar el atributo maxlength de html para restringir la cantidad de caracteres de tus input.

<input type="text" name="rut" required maxlength="5" placeholder="Rut">
<input type="text" name="nombre" required maxlength="8"  placeholder="Nombre">

2

El problema es que al haber error estableces un mensaje, pero no lo quitas cuando el valor es correcto y por eso es que el campo sigue marcado con error.

Solución: Crea una variable para el mensaje de validación (vacía) / error (texto) y actualiza de acuerdo al valor:

function checklargo(campo, max) {
    var palabra=campo.value;
    // Crear mensaje, en blanco para valor correcto
    var msg = '';
    if(palabra.length > max) {
        // Hay error, actualizar mensaje
        msg = "Excede el largo permitido";
    }
    campo.setCustomValidity(msg); 
}
<input type="text" name="rut" required oninput="checklargo(this, 10)" placeholder="Rut">
<input type="text" name="nombre" required oninput="checklargo(this, 5)" placeholder="Nombre">

Todo se podría hacer en una sola línea, aunque probablemente no sería tan legible. Al menos la declaración de la variable se puede hacer con asignación ternaria:

var msg = (palabra.length > max) ? 'Excede el largo permitido' : '';

Actualización: Modifiqué el nombre del primer parámetro que recibe la función, para evitar confusiones. Y agregué un segundo parámetro para especificar la longitud máxima del campo.

Ahora puedes usarlo para más de 1 validación.

3
  • Hola: Muchas gracias finalmente ocupé tu función y funciona de maravilla.lo que si tengo otra duda si quisera usar la misma función para validar otros campos, tendría que crear otras funciones y recibir el objeto del form? o la variable funciona como local y aunque se llame nombre serviría igual, funcionando como cualquier otra variable? Saludos y gracias por responder. Commented el 5 sept. 2020 a las 4:53
  • Revisa la actualización. Si la respuesta te sirvió, no olvides marcarla como aceptada.
    – Triby
    Commented el 5 sept. 2020 a las 5:26
  • la validación ternaria no me resultó, aunque estoy probando la modificación que hiciste. Aunque creo q estoy entendiendo porqué no resultó Saludos y muchas gracias Commented el 5 sept. 2020 a las 6:23

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.