Skip to main content
4 de 4
cuerpo editado
Richard
  • 1.5k
  • 3
  • 19
  • 52

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>

Richard
  • 1.5k
  • 3
  • 19
  • 52