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 cunado 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>