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 --------------------------------- <!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-js --> 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'); } } <!-- language: lang-html --> <!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> <!-- end snippet -->