2009-07-25 6 views
6

Im Recherche d'une solution simple pour empêcher la soumission d'un formulaire de connexion avec des champs de saisie vides. Le code du formulaire est ci-dessous. Je voudrais utiliser un simple Javascript si possible.Arrêter la soumission avec des valeurs d'entrée vides

<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 possible, je voudrais également changer la bordure du champ vide (s).

Merci d'avance.

Répondre

9

Exemple de code avec des contrôles factices:

<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> 
3

Approche possible:

  • action paramètre pour #
  • ajoutant gestionnaire au bouton soumettre ou la onsubmit de la forme
  • modifier l'action de la forme, si les champs de texte ne sont pas vides

Modifier: Pour que cela fonctionne même pour les utilisateurs non-javascript, insérez le # -action lorsque la page est chargée.

+1

Et n'oubliez pas d'ajouter return false; dans votre gestionnaire d'onsubmit, si le champ de texte est vide. Aussi, consultez le plugin jQuery Validation pour une meilleure approche de la validation des formulaires: http://docs.jquery.com/Plugins/Validation –

+0

vous avez raison avec le retour false. Mais je n'ai rien vu de jQuery dans la question ;-) – TheHippo

+0

Si possible, pourriez-vous fournir un exemple de ce que vous voulez dire. Je suis un peu nouveau à JS. Mes racines sont en xHTML et CSS. –

2

Pour le garder un minimum, je voudrais simplement utiliser:

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

D'accord - ne pointe pas ce qui est mal à l'utilisateur, mais fonctionne un régal .

Questions connexes