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>

Ver ejemplo anterior

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';
  }  
}

(adsbygoogle = window.adsbygoogle || []).push({});

Mensajes de error en la carga de un formulario