JSFiddle - React, Tailwind, and code Playground

by Wagner Souza

HTML

<form id="form" action="/">
    <input type="tel" class="phone-number" autofocus="true" placeholder="Digite um número de celular" maxlength="9" />
	<button type="submit">Enviar</button>
</form>

CSS

/* Só para remover o outline */
input:focus {
	outline: none;
}	
	
.phone-number.valid {
	border: green 1px solid;
}

.phone-number.invalid {
	border: red 1px solid;
}

JavaScript

// Quando o DOM estiver pronto;
document.addEventListener('DOMContentLoaded', function() {

	// Pega o input do telefone;
	var phone = document.querySelector('.phone-number'),
		// Regex para analisar o valor que o usuário inserir;
		sRegex = new RegExp('/^[9|8]\d{7,8}/g');

	// Detecta quando o formulário for enviado;
	document.getElementById('form').onsubmit = function(evt) {

		// Se não passar na validação do regex;
		if(!phone.value.match(sRegex)) {
			phone.classList.add('invalid');
		}
		// Se passar na validação do regex;
		else {
			phone.classList.add('valid');
			return true;
		}
		
		// Falso por padrão para que o formulário só seja enviado caso seja válido;
		return false;
	};
	
}, false);