JavaScript

Dernière mise à jour : 26/05/2016

Validation d'un formulaire

Énoncé

Vous avez une page avec un formulaire et un champ. Écrivez un script qui va valider le formulaire. Si le champ est vide, un message d'erreur est affiché à côté du champ et le formulaire n'est pas envoyé. Si le champ contient des données, le formulaire peut être envoyé.

Solution

Fichier "js/script.js"

function validateForm() {
  if(document.getElementById('myField').value == '') {
    document.getElementById('myFieldError').innerHTML = 'Le champ ne peut être vide';
    return false;
  } else {
    document.getElementById('myFieldError').innerHTML = '';
    alert('Le formulaire peut être envoyé');
    return true;
  }
}

Fichier "index.html"

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta author="Sébastien Adam">
    <meta charset="UTF-8">
    <meta name="language" content="fr">
    <title>Validation d'un formulaire</title>
    <script type="text/javascript" src="js/script.js"></script>
  </head>
  <body>
    <div>
      <form id="myForm" onsubmit="return validateForm();">
        <div>
          <label for="myField">Champ&nbsp;:</label>
          <input type="text" id="myField" size="60">
          <span id="myFieldError"></span>
        </div>
        <div>
          <input type="submit" value="Envoyer">
        </div>
      </form>
    </div>
  </body>
</html>