0

Estoy usando un input con diseño y animación de Materializecss para ingresar datos, los cuales deben ser validados en tiempo de escritura y mostrar un mensaje de error o de correcto.

No puedo hacer que muestre correctamente el color y mensaje de si esta bien o mal

document
    .getElementById('entrada')
    .addEventListener('input',validar);


function validar() {
    var usuario = document.getElementById('entrada').value,
        resultado = document.getElementById('help');

    patro2 = /^\w{3,5}\d{6}\w{3,4}$/;
    patron = /^\d{8}$/;
    if (patron.test(usuario)||patro2.test(usuario)) {
        resultado.innerText = "correcto";
        console.log('correcto');
    } else {
        resultado.innerText = "ERROR";
        console.log('error');
    }
    
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

    <!-- Compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<div class="row">
    <form class="col s12">
        <div class="row">
            <div class="input-field col s12">
                <input id="entrada" type="text" class="validate">
                <label for="entrada">Entrada</label>
                <span  id="help" class="helper-text" data-error="wrong" data-success="right">Ingrese datos</span>
            </div>
        </div>
    </form>
</div>

<body>

</body>

</html>

4
  • ¿Qué tomas en cuenta al escribir en tiempo real para saber si está bien o no y pintarlo de otro color, amigo? Commented el 21 ene. 2020 a las 21:38
  • @FernandoTorres uso patro2 y patron para indicar si esta bien lo que se ingreso o no, si te refieres a que valores son validos, es: 12345678 o qwer123456as6
    – Richard
    Commented el 21 ene. 2020 a las 21:44
  • Sí vi, amigo, pero, mi pregunta es más bien, ¿eso qué valida? Ya que yo puedo interpretar algo erróneo en esa expresión regular, ¿qué esperas validar? Commented el 21 ene. 2020 a las 21:45
  • @FernandoTorres edite mi respuesta los datos validos son: 12345678 o qwer123456as6
    – Richard
    Commented el 21 ene. 2020 a las 21:46

2 respuestas 2

2

No se si sea la forma mas optima, pero estudiando un poco el código que tiene Materializecss en el archivo materialize.js para validar el campo, lo que hice fue agregar y remover la clase encargada de aplicar el estilo cuando esta correcto o erróneo.

Quedando la funcion validar() de la siguiente manera

function validar() {
    var usuario = document.getElementById('entrada'),
        resultado = document.getElementById('help');

    patro2 = /^\w{3,5}\d{6}\w{3,4}$/;
    patron = /^\d{8}$/;
    if (patron.test(usuario.value)||patro2.test(usuario.value)) {
        usuario.classList.remove('invalid');
        usuario.classList.add('valid');
    } else {
        usuario.classList.remove('valid');
        usuario.classList.add('invalid');
    }

}

Si lo que se quiere es cambiar el texto a mostrar y no hacerlo desde el html, otra opcion seria agregar lo siguiente.

setAttribute('data-error','Mensaje personalizado')

Quedando de la siguiente manera

function validar() {
    var usuario = document.getElementById('entrada'),
        resultado = document.getElementById('help');

    patro2 = /^\w{3,5}\d{6}\w{3,4}$/;
    patron = /^\d{8}$/;
    if (patron.test(usuario.value)||patro2.test(usuario.value)) {
        usuario.classList.remove('invalid');
        usuario.classList.add('valid');
        resultado.setAttribute('data-success','Dato correcto');
    } else {
        usuario.classList.remove('valid');
        usuario.classList.add('invalid');
        resultado.setAttribute('data-error','Dato incorrecto');
    }

}

Dando como resultado lo siguiente

document
    .getElementById('entrada')
    .addEventListener('input',validar);


  function validar() {
    var usuario = document.getElementById('entrada'),
        resultado = document.getElementById('help');

    patro2 = /^\w{3,5}\d{6}\w{3,4}$/;
    patron = /^\d{8}$/;
    if (patron.test(usuario.value)||patro2.test(usuario.value)) {
        usuario.classList.remove('invalid');
        usuario.classList.add('valid');
    } else {
        usuario.classList.remove('valid');
        usuario.classList.add('invalid');
    }

}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

    <!-- Compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<div class="row">
    <form class="col s12">
        <div class="row">
            <div class="input-field col s12">
                <input id="entrada" type="text" class="validate">
                <label for="entrada">Entrada</label>
                <span  id="help" class="helper-text" data-error="Dato no valido" data-success="Correcto">Ingrese datos</span>
            </div>
        </div>
    </form>
</div>

<body>

</body>

</html>

3
  • eso fue exactamente lo que hice cuando estaba revisando tu codigo , pero vi inconsistencias respecto al span que querias mostrar como mensaje , ya que en tu pregunta , aclarabas que tambien era el texto el que querias cambiar y materialize lo colocaba por defecto , por eso te dije que podias sobreescribir tu label , donde hagas todos esos cambios , tu mismo , la forma que aplicaste es valida siempre y cuando no te interese el titulo de los span respecto al error o exito Commented el 22 ene. 2020 a las 1:44
  • 1
    @DiegoAndresRojas claro llegar al mensaje es lo importante, y también lo pude hacer con Js pero al ser 2 textos predeterminados no vi la necesidad de hacerlo con js a si que aproveche lo que ya coloca Materializecss, usando data-success y data-error. edito mi respuesta para mostrar los mensajes que es a lo que se quería llegar.
    – Richard
    Commented el 22 ene. 2020 a las 1:49
  • dale bro , suerte con tu codigo :) Commented el 22 ene. 2020 a las 1:51
0

Si tu te diriges a la pagina de documentación de Materialize , podrás observar que para los campos de tipo texto , dicha validación no funciona de la misma manera que para por ejemplo un campo de tipo email , ya que dichos campos deben tener una configuración predeterminada para que funcionen con los data-success y data-error , dicho eso también cabe la pena resaltar que he trabajado algunas veces con materialize y he encontrado varias inconsistencias o "bugs" extraños, estuve una hora checkeando tu codigo de distintas formas , para tratar de enlazarlo con materialize, pero el codigo por debajo de materialize no permite hacer cambios que uno esperaria funcionaran , te recomiendo cambiar de forma para llegar al mismo objetivo , o hacerlo con materialize pero sobreescribir ese label para tu mismo implementar los colores que deseas de error y exito , mucha suerte :)

3
  • Gracias por intentar. Tienes razón hay inconsistencias y bugs en varios casos, pero por suerte llegue a una solución pasable, después de estudiar su código fuente un buen rato, logre aplicarlo a mi propia lógica e idea para dicho problema, he publicado una respuesta por si te sirve o alguien mas.
    – Richard
    Commented el 22 ene. 2020 a las 1:43
  • eso es lo importante Richard , que encuentres la solución , pero si vas a quedarte con la version de que no aparezca el span de error o correcto si no lo predeterminado por materialize , quisas deberias editar la parte donde dices No puedo hacer que muestre correctamente el color y mensaje de si esta bien o mal , suerte con tu codigo amigo :) Commented el 22 ene. 2020 a las 1:47
  • 1
    Gracias, en cuanto a la parte del texto que mencionas(No puedo hacer que muestre correctamente el color y mensaje), con la respuesta que coloque(editado recientemente), se aplica correctamente el mensaje y color de pendiendo de si esta bien o mal, pero en caso de que veas alguna mejora o sugerencia al código que ayude, agradecido estaré. Saludos.
    – Richard
    Commented el 22 ene. 2020 a las 2:08

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.