Jquery dialog et form validator

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 :P .
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 ca c'est okay. Mais je souhaite pouvoir empêcher l'envoi du formulaire si les condition ne sont pas rempli.
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:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
 
<!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" ); 
        }
    }]
  });

Merci pour votre aide et explications.