Estoy buscando una solución simple para evitar que un formulario de inicio de sesión se envíe con campos de entrada vacíos. El código para el formulario está abajo. Me gustaría usar una solución Javascript simple si es posible.

<form id="login" method="post" action=""> 
    <input type="text" name="email" id="email" /> 
    <input type="password" name="pwd" id="pwd" /> 
    <button type="submit" id="submit">Login</button>
</form>     

Si es posible, también me gustaría cambiar el borde de los campos vacíos.

Gracias de antemano.

6
Brad Birdsall 25 jul. 2009 a las 22:55

3 respuestas

La mejor respuesta

Código de muestra con controles ficticios:

<script type="text/javascript">
function checkForm(form) {
    var mailCheck = checkMail(form.elements['email']),
        pwdCheck = checkPwd(form.elements['pwd']);
    return mailCheck && pwdCheck;
}

function checkMail(input) {
    var check = input.value.indexOf('@') >= 0;
    input.style.borderColor = check ? 'black' : 'red';
    return check;
}

function checkPwd(input) {
    var check = input.value.length >= 5;
    input.style.borderColor = check ? 'black' : 'red';
    return check;
}
</script>

<style type="text/css">
#login input {
    border: 2px solid black;
}
</style>

<form id="login" method="post" action="" onsubmit="return checkForm(this)"> 
    <input type="text" name="email" id="email" onkeyup="checkMail(this)"/> 
    <input type="password" name="pwd" id="pwd" onkeyup="checkPwd(this)"/> 
    <button type="submit" id="submit">Login</button>
</form>
9
Christoph 25 jul. 2009 a las 21:16

Para mantenerlo mínimo, solo usaría:

<form id="login" method="post" action="" onSubmit="if (this.email.value == '' || this.pwd.value == '') {return false;}">

De acuerdo: no señala lo que está mal para el usuario, pero funciona de maravilla.

2
David Goodman 23 feb. 2012 a las 14:49

Posible enfoque:

  • establecer acción en #
  • agregar controlador al botón de envío o al onsubmit del formulario
  • cambiar la acción del formulario, si los campos de texto no están vacíos

Editar: para que esto funcione incluso para usuarios que no utilizan JavaScript, inserte la acción # cuando se carga la página.

3
TheHippo 25 jul. 2009 a las 18:58