18041 sujets

Questions générales et questions de débutants

Plug in jquery

Tout d'abord : bonjour!

Je suis en train d'utiliser des plug in sur jquery qui sont censés me faciliter le développement. Ce qui n'est pas le cas vu que je débute en jquery Smiley smile .
Donc un peu d'aide me serait utile. J'ai utilisé 2 bibliothèques, dialog et jQuery Form Validator.
Je souhaite déclencher un message si le formulaire est remplie au bon format que ce soit de manière dynamique lors de la saisie mais aussi lorsqu'on appuie sur "ok".
Je n'arrive pas à le faire fonctionner quand on appuie sur ok.
Ci-joint le code simplifié que j'ai mis en place pour comprendre le pourquoi du comment:

Merci pour votre aide et explications.


<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Le titre du document</title>

    <link rel="stylesheet" href="\lib_JQuery\jquery-ui-1.11.4.custom\jquery-ui.css">

    <link rel="stylesheet" href="\lib_JQuery\jQuery-Form-Validator-master\form-validator\theme-default.css">
  </head>
  <body>
  <div id='calendar'>
  <input type="button" id="button" value="ok" class="text ui-widget-content ui-corner-all" data-validation="time">
  </div>

  <div id="dialog-form" title="Nouveau rendez-vous">
  <p class="validateTips">All form fields are required.</p>
 
  <form id="NouveauRDV">
    <fieldset>
      <input type="text" name="debut" id="debut" value="" class="text ui-widget-content ui-corner-all" data-validation="time">
      <label for="duree">Duree</label>
      <input type="text" name="duree" id="duree" value="" class="text ui-widget-content ui-corner-all" data-validation="time">
    </fieldset>
  </form>
</div>

  <script src="lib_JQuery/jquery-2.2.3.js"></script>
  <script src="lib_JQuery/jquery-ui-1.11.4.custom/jquery-ui.js"></script>
  <script src="lib_JQuery/jQuery-Form-Validator-master/form-validator/jquery.form-validator.js"></script>
  <script src="lib_JQuery/jQuery-Form-Validator-master/src/lang/fr.js"></script>

  <script>
 $(document).ready(function() {
  $.validate({
    modules :'date',
  });
  

  $("#button").on("click", function (){ formulaire.dialog("open");})

  function afficher(){
    alert ("a")
  }
 
  formulaire = $("#dialog-form").dialog({
      autoOpen: false,
      height: 500,
      width: 1200,
      modal: true, 
      buttons :[
        {
          text:"ok",
          click: function (){
             $("#NouveauRDV").validate('onSuccess', function (){alert ('Format validé')})//Que mettre à la place de cette ligne de code qui ne fonctionne pas ???
          }
        },
        {
          text:"Cancel",
          click: function() {
          $( this ).dialog( "close" ); 
        }
    }]
  });

  });  

    </script>

</html>

Modifié par Mathaousse (16 Apr 2016 - 18:08)
Sujet clos
Aller à