Inserir flag erro ou sucesso

Validação de dados com ícones de erro ou sucesso (não digitar números)

by Alex

HTML

<form id="container">
  <label>Digite seu nome:</label>
  <input type="text" id="entrada">
</form>
<p id="saida"></p>

CSS

@import url(//fonts.googleapis.com/css?family=Bitter);
body {
  font-family: 'Bitter', serif;
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
}

label {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 10px;
  display: block;
}

input {
  padding: 0.5em;
  font-size: 18px;
}

img {
  float: right;
  max-width: 20px;
  height: 20px;
  margin-top: 10px;
}

#container {
  max-width: 270px;
}

JavaScript

window.onkeyup = function() {
  var input = document.getElementById("entrada").value;
  var output = document.getElementById("saida");
  var container = document.getElementById("container");
  if (input.match(/^[a-záàâãéèêíïóôõöúçñ ]+$/i)) {
    output.innerHTML = input.toUpperCase();
    createNewImage("success");
  } else {
    output.innerHTML = "Não digite números";
    createNewImage("error");
  }
}

function deleteImages() {
  var imgs = container.getElementsByTagName('img');
  for (i = 0; i < imgs.length; i++) {
    container.removeChild(imgs[i]);
  }
}

function createNewImage(status) {
  deleteImages();
  var img = document.createElement("img");
  if (status == "error") {
    img.src = "https://s1.postimg.org/7ztyeajpn/error.jpg";
  } else if (status == "success") {
    img.src = "https://s1.postimg.org/erkdh58p7/success.jpg";
  }
  container.appendChild(img);
}