Validar campos vacios con onchange

[srwik]

Muy buenas,

Estoy intentando validar un formulario, primeramente avisando al usuario de que un campo está vacio utilizando onchange. El caso es que no me funciona.

HTML:

Código HTML:

 <form action="<?php echo htmlspecialchars($_SERVER['PHP_SELF']);?>" method="POST">
       <input type="text" class="form-control" placeholder="Nombre de usuario " name="username" id="username" onchange="usernameform()">
       <i class="fa fa-user"></i>
       <p id="msusername"></p>
     </div> 

JAVASCRIPT:

Código HTML:

function usernameform() {
  var userinput = document.getElementById("username").value;
  if ( userinput === "" ){
document.getElementById("msusername").innerHTML = "Escribe tu nombre de usuario";
  }
  }

Debe ser algo que no he visto pero llevo 2 horas dándole vuelta y nada.

Gracias de antemano!

[petit89]

Para mi deberias ocupar el evento onblur ya que este valida al dejar el campo, es decir valida lo que se dejo o no, al pasar a otro... pruebalo asi:

Código Javascript:

function usernameform() {
  var userinput = document.getElementById('username').value;
  if (userinput == "" ){
document.getElementById("msusername").innerHTML = "Escribe tu nombre de usuario";
  }
  }
 

Código HTML:

<form action="<?php echo htmlspecialchars($_SERVER['PHP_SELF']);?>" method="POST">
       <input type="text" class="form-control" placeholder="Nombre de usuario" name="username" id="username" onblur="usernameform()">
       <i class="fa fa-user"></i>
       <p id="msusername"></p>
       </form>
 

En tu codigo tenias varios errores como "===", checa bien...

[KATHYU]

Serviría de algo usar las validaciones de HTML ??

Osea si el campo es required y esta vacío no lo dejara pasar

[Alexis88]

Iniciado por petit89

En tu codigo tenias varios errores como "===", checa bien...

Esa triple igualdad no es un error; es el operador de igualdad estricta.

Y, como te lo recomendó KATHYU, puedes utilizar el atributo required, introducido en el estándar HTML5, en los campos del formulario para evitar que se procese teniendo campos vacíos. Y si quieres compatibilidad con navegadores antiguos, puedes recorrer al conjunto de campos del formulario y verificar uno por uno si poseen o no contenido para así determinar si se procesará o no el formulario.

[srwik]

Muchas gracias, con onblur funciona perfecto!

Hasta ahora siempre hacía estas cosas con php, pero es mucho más rápido y visual para el visitante hacerlo así :)

Saludos!

[srwik]

Quería editar pero se me cuelga al enviar con el captcha. Lo pongo aquí:

¿Cómo sería para que una vez "corregido" desaparezca el mensaje de aviso?
Había pensado incluso en que se sustituya por un icono tipo check en verde.

En teoría a la condición solo tendría que añadirle un else con ese check, pero ¿Cómo se resetea el onblur para cada vez que lo modifico?

Muchas gracias