Pourquoi mon formulaire ne valide pas correctement?

Question

J'essaie de valider un formulaire, mais ne fonctionne pas: \, Quand je soumets le formulaire va à mail.php même si les champs requis sont manquants, mais j'ai mis onsubmit à validate() donc il devrait vérifier, mais doesn ne fonctionne pas. Quel est le problème avec mon code? Je ne peux pas le trouver.

HTML:

<form action="mail.php" onsubmit="return validate()" method="post" class="contact-form" id="contactForm"> 

    <div id="errors"></div> 

    <label for="author">Name:</label><br/><br/> 

    <input type="text" name="author" id="message" /><br/><br/> 

    <label for="author">Message:</label><br/><br/> 

    <textarea name="message" id="message"></textarea><br/><br/> 

    <input type="submit" class="button" value="Send Message"/> 

</form> 

Javascript:

<script type="text/javascript"> 
    function error(message){ 
     return "<p class=\"error\">"+message+"</p>"; 
    } 

    function validate(){ 
     var form  = document.getElementById("contactForm"); 
     var author  = document.getElementById("author"); 
     var message = document.getElementById("messsage"); 
     var errors = document.getElementById("errors"); 
     alert(author.value); 
     if(message.value == '' || author.value == ''){ 
      errors.innerHTML = error("Please fill in all fields."); 
      return false; 
     } else { 
      return true; 
     } 

    } 
</script> 

Answer 1

var message = document.getElementById("messsage"); 

Le message comporte un "s" supplémentaire.

<input type="text" name="author" id="message" /> 

Vous devez changer "message" à "auteur"

Answer 2

id = auteur sur votre premier élément d'entrée.

Consultez également jQuery il vous fera économiser du temps à long terme

Answer 3

Vous avez deux éléments avec l'identifiant message et aucun avec author. Le Markup Validator aurait pris cela pour vous.

Answer 4

Ceci est faux:

<input type="text" name="author" id="message" /> 

Nécessité de mettre name et id aux mêmes valeurs (que vous utilisez pour id="message" le champ suivant, donc il y a un conflit

Également les deux vos label ont for="author", le second est wr ong.

Je suppose que votre problème ici est trop de copier-coller. ;)