Como validar un campo de texto

Como validar campo de texto con Javascript sin dependencias adicionales

by Porfirio Chavez

HTML

<label for="nombre">Nombre</label>
<input id="nombre">
<div id="result" class="result"></div>

CSS

body {
  margin-top: 4rem;
  margin-left: 2rem;
}

input {
  border-radius: 0.5rem;
  border: solid 1px #278ea5;
  padding: 0.5rem 1rem;
  margin-bottom: 12px;
  font-size: 1.1rem;
}

label {
  font-family: verdana;
  font-weight: bold;
  margin-right: 1rem;
}

.result {
  margin-left: 4rem;
  color: red;
}

JavaScript

const nameInput = document.getElementById('nombre');
const resultDiv = document.getElementById('result');


nameInput.addEventListener('input', (event) => {
  const textValue = event.currentTarget.value;

  if (!isValidText(textValue)) {
    return resultDiv.innerHTML = `${textValue} no es válido`;
  };

  resultDiv.innerHTML = '';
});


function isValidText(text) {
  return /^[A-z]+$/.test(text);
}