Mensajes de error en la carga de un formulario

Una actividad muy común es la validación de datos en el cliente mediante JavaScript.

Implementaremos un formulario que solicite la carga del nombre de usuario y la clave. Mostraremos en la página un mensaje de error si no se carga alguno de los dos datos.

<!DOCTYPE html>
<html>
<head>
<title>Problema</title>
<script>
window.addEventListener('load',inicializarEventos,false);

function inicializarEventos()
{
  var ob=document.getElementById('confirmar');
  ob.addEventListener('click',validar,false);
}

function validar(e)
{
  var usu=document.getElementById('usuario');
  var error='';
  if (usu.value=='')
  {
    error='Debe ingresar el nombre de usuario
';
  }
  var cla=document.getElementById('clave');
  if (cla.value=='')
  {
    error=error+'Debe ingresar la clave.';
  }
  if (error!='')
  {
    e.preventDefault();
    var er=document.getElementById('error');
    er.innerHTML=error;
    er.style.display='block';
  }  
}
</script>
<Style>
#error{
  display:none;
  color:#f00;
  background-color:#ff0;
  font-size:15px;
  width:400px;
  border:1px solid #00f;
  padding:5px;
}
</Style>
</head>
<body>
<form action="#" method="post">
Nombre de usuario:
<input type="text" id="usuario" name="usuario">
<br>
Clave:
<input type="password" id="clave" name="clave">
<br>
<input type="submit" value="Confirmar" id="confirmar">
</form>
<div id="error">
</div>
</body>
</html>

El código javascript es:

window.addEventListener('load',inicializarEventos,false);

function inicializarEventos()
{
  var ob=document.getElementById('confirmar');
  ob.addEventListener('click',validar,false);
}

function validar(e)
{
  var usu=document.getElementById('usuario');
  var error='';
  if (usu.value=='')
  {
    error='Debe ingresar el nombre de usuario
'; } var cla=document.getElementById('clave'); if (cla.value=='') { error=error+'Debe ingresar la clave.'; } if (error!='') { e.preventDefault(); var er=document.getElementById('error'); er.innerHTML=error; er.style.display='block'; } }

Lo primero que hacemos en la función inicializarEventos es indicar el nombre de la función que se debe disparar al presionar el botón:

  var ob=document.getElementById('confirmar');
  ob.addEventListener('click',validar,false);

La función validar extraemos una referencia al input de tipo text donde se ingresa el nombre de usuario y verificamos si se encuentra vacío, en caso afirmativo inicializamos un string con el error. Algo similar hacemos con el otro control para luego verificar si el string donde almacenamos el o los errores está vacío o no:

function validar(e)
{
  var usu=document.getElementById('usuario');
  var error='';
  if (usu.value=='')
  {
    error='Debe ingresar el nombre de usuario
'; } var cla=document.getElementById('clave'); if (cla.value=='') { error=error+'Debe ingresar la clave.'; } if (error!='') { e.preventDefault(); var er=document.getElementById('error'); er.innerHTML=error; er.style.display='block'; } }