Question

I use javascript to validate a form before to submit. When I detect an error on a field the form still posts. How can I prevent from submitting on error?

Here's my form:

    <form onSubmit="return validateForm()" action="send.php" method="post"  name="formulaire">
        Prénom: <input type="text" name="prenom"><p id="valider_prenom"></p><br>
        Nom: <input type="text" name="nom"><p id="valider_nom"></p><br>
        Email: <input type="text" name="email"><p id="valider_email"></p><br>
        Code postal: <input type="text" name="codepostal"><p id="valider_codepostal"></p><br>
      <INPUT type="submit" value="Envoyer">
    </form>

Here's my javascript function:

<script type="text/javascript">
    function validateForm()
    {
      var prenom = document.forms["formulaire"]["prenom"].value;
      var nom = document.forms["formulaire"]["nom"].value;
      var email = document.forms["formulaire"]["email"].value;
      var codepostal = document.forms["formulaire"]["codepostal"].value;
      var erreur = false;

      // Pour la validation du format de email
      var atpos = email.indexOf("@");
      var dotpos = email.lastIndexOf(".");

      if (prenom == null || prenom == "")
      {
        document.getElementById('valider_prenom').innerHTML = '* Requis';
        erreur = true;
      }

      if (nom == null || nom == "")
      {
        document.getElementById('valider_nom').innerHTML = '* Requis';
        erreur = true;
      }

      if (email == null || email == "")
      {  
        document.getElementById('valider_email').innerHTML = '* Requis';
        erreur = true;
      }
      else if (atpos < 1 || dotpos < atpos + 2 || dotpos + 2 >= email.length)
      {
        document.getElementById('valider_email').innerHTML = '* Adresse incorrect';
        erreur = true;
      }

      if (codepostal == null || codepostal == "")
      {
        document.getElementById('valider_codepotal').innerHTML = '* Requis';
        erreur = true;
      }

      if (erreur){return false;}
    }
  </script>
Was it helpful?

Solution

If you replace the last line of your code with if (erreur == true){return false;} it will validate your form.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top