Untitled

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.validate.js"></script>

<style>
    .error {
        border: 1px solid red;
    }
</style>

</head>

<body>
<div>

<!-- Affichage des messages liés à la validation des champs du formulaire -->
<div class="errorDiv">
  <span></span>
</div>

  <form action="/scripts_php/envoyer_demande_selection.php" id="form_selection">
    <!-- Liste des dates de tournées -->
    <select name="list_inscription_selection" id="list_inscription_selection">
      <option value="">Select a date</option>
      <option value="1">Date 1</option>
    </select>

    <label for="nom">Name</label><input type="text" name="nom" id="nom" class="required" /><br />
    <label for="prenom">First name</label><input type="text" name="prenom" id="prenom" /><br />
    <label for="societe">Company</label><input type="text" name="societe" id="societe" /><br />
    <label for="adresse">Address</label><input type="text" name="adresse" id="adresse" /><br />
    <label for="cp">Postcode</label><input type="text" name="cp" id="cp" /><br />
    <label for="ville">City</label><input type="text" name="ville" id="ville" /><br />
    <label for="tel">Phone number</label><input type="text" name="tel" id="tel" /><br />
    <label for="mail">Email</label><input type="text" name="mail" id="mail" /><br />
    <input type="hidden" name="nbChevaux" id="nbChevaux" value="0" /><br />
    <input type="button" value="Add a horse" id="btnAddRow" /><br />

    <div id="zoneChevauxSelection">

    <table id="tableChevauxSelection">

      <tr>
        <th>Name</th>
        <th>Sex</th>
        <th>Born</th>
        <th>Colour</th>
        <th>Father</th>
        <th>Mother</th>
      </tr>

    </table>

  <input type="submit" value="Validate"/>

  </form>

  </div>
</div>


<script type="text/javascript">


/*
 * Fonction qui lance la création de lignes supplémentaires dans le tableau des chevaux à inscrire
 */
function addRows(){
  // On ne permet pas la saisie de plus de 10 chevaux
  if(parseInt($("#nbChevaux").val()) < 10){
    $("#nbChevaux").val(parseInt($("#nbChevaux").val()) + 1);
    var nbChevaux = parseInt($("#nbChevaux").val());

    //Index permettant de nommer de façon unique les tr (afin de pouvoir les supprimer facilement)
    if($("#tableChevauxSelection tr").size() > 1){
      // Si des lignes ont déjà été créées dans le tableau, on se sert de l'index de la dernière qui a été créée
      var indexTr = parseInt($("#tableChevauxSelection tr:last").attr('id').substr(8))+1;
    }else{
      // Si aucune ligne n'a été créée
      var indexTr = "0";
    }

    // Quelques précautions pour éviter de créer trop de lignes dans le tableau
    var tr = jQuery('<tr>', {id: 'trCheval'+indexTr});
    tr.append(
        "<td><input type='text' id='nomCheval"+indexTr+"' name='nomCheval[]' class='nomCheval'/></td>"
    );

    $("#tableChevauxSelection").append(tr);

    $("#nomCheval"+indexTr).rules("add", {horseNameRequired: true});

    // On affiche le tableau
    $("#tableChevauxSelection").show();
  }
}

/*
 * Suppression d'une ligne dans le tableau des chevaux à inscrire
 */
function deleteRowCheval(indexTr){
  // Suppression du la ligne dans le tableau
  $("#trCheval"+indexTr).remove();

  // Mise à jour du nombre de chevaux
  $("#nbChevaux").val(parseInt($("#nbChevaux").val()) - 1);

  // S'il ne reste que la ligne des en-têtes, on cache le tableau
  if($("#tableChevauxSelection tr").size() == 1){
    $("#tableChevauxSelection").hide();
  }
}


$(document).ready(function() {
  // On bind la fonction addRows au bouton Valider
  $("#btnAddRow").click(function(){
    addRows();
  });

  // Règles de validation du formulaire
  $("#form_selection").validate({
    rules: {
      list_inscription_selection: {
        required: true
      },
      nom: {
        required: true,
        minlength: 2
      },
      prenom: {
        required: true,
        minlength: 2
      },
      societe: {
        minlength: 2
      },
      adresse: {
        required: true,
        minlength: 5
      },
      cp: {
        required: true,
        digits: true,
        minlength: 5,
        maxlength: 5
      },
      ville: {
        required: true,
        minlength: 2
      },
      tel: {
        required: true,
        digits: true
      },
      mail: {
        required: true,
        email: true
      },
      nbChevaux: {
        required: true,
        min: 1,
        max: 10
      }
    },
    messages: {
      list_inscription_selection: {
        required: "Select a date"
      },
      nom: {
        required: "Please enter your name.",
        minlength: "Please enter at least 2 characters."
      },
      prenom: {
        required: "Please enter your first name.",
        minlength: "Please enter at least 2 characters."
      },
      societe: {
        required: "Please enter your company name.",
        minlength: "Please enter at least 2 characters."
      },
      adresse: {
        required: "Please enter your address.",
        minlength: "Please enter at least 5 characters."
      },
      cp: {
        digits: "Please enter only digits.",
        required: "Please enter your zip code.",
        minlength: "Please enter at least 5 characters.",
        maxlength: "Please enter no more than 5 characters."
      },
      ville: {
        required: "Please enter your city.",
        minlength: "Please enter at least 2 characters."
      },
      tel: {
        required: "Please enter your phone number.",
        digits: "Please enter only digits."
      },
      mail: {
        required: "Please enter your email.",
        email: "Please enter a valid email address."
      },
      nbChevaux: {
        required: "You must enter at least one horse.",
        min: "You must enter at least one horse.",
        max: "You can not enter more than 10 horses"
      }
    },
    submitHandler: function(form) {
      // On fait en sorte que le formulaire s'exécute en ajax (en POST pour éviter que l'on atteigne la limite de la chaîne de paramètres en GET
      $(form).ajaxSubmit({type: 'post'});
    },
    invalidHandler: function(e, validator) {

      var errorNb = validator.numberOfInvalids();
      if (errorNb) {

        var message = "";

        if(errorNb == 1){
          message = validator.invalidElements().prevObject[0].message;

        }else{

          message += "<ul>";

          for(var i = 0; i< errorNb; i++){
            message += "<li>"+validator.invalidElements().prevObject[i].message+"</li>";
          }

          message += "</ul>";

        }

        $("div.errorDiv span").html(message);

        $("div.errorDiv").show();
      } else {
        $("div.errorDiv").hide();
      }
      if($(".nomCheval").size()){
        $(".nomCheval .error").each(function(){
          $(this).addClass("error");
        });
      }
    },
    errorPlacement: function(error,element) {
      // Pour ne pas afficher les labels des messages d'erreurs
      return true;
    }


  });

  // Validation des champs créés dynamiquement
  $.validator.addMethod("horseNameRequired", $.validator.methods.required, "Name of the horse required");

});

</script>

</body>

</html>