[UI] Form dialog jQuery dans un formulaire HTML

Bonjour à tous,

je débute avec jQuery et je rencontre un problème qui, je l'espère, vous paraîtra simple à identifier et à solutionner.
Je souhaite implémenter une form dialog jQuery dans une page HTML comportant déjà un formulaire (balise <form>).
Lorsque je clic sur le bouton qui permet l'ouverture de la form dialog, je vois apparaître la boite de dialogue mais cette dernière se referme aussitôt.
Si je retire le formulaire initiale de ma page HTML (toujours la balise <form>), je ne rencontre plus ce problème.
Auriez-vous une solution ou une piste à me donner ?

Merci par avance

Ci-dessous le code de ma page :

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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
$(function() {
    var dialog, form,
 
      // From http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#e-mail-state-%28type=email%29
      emailRegex = /^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/,
      name = $( "#name" ),
      prenom = $( "#prenom" ),
      email = $( "#email" ),
      password = $( "#password" ),
      allFields = $( [] ).add( name ).add( email ).add( password ),
      tips = $( ".validateTips" );
 
    function updateTips( t ) {
      tips
        .text( t )
        .addClass( "ui-state-highlight" );
      setTimeout(function() {
        tips.removeClass( "ui-state-highlight", 1500 );
      }, 500 );
    }
 
    function checkLength( o, n, min, max ) {
      if ( o.val().length > max || o.val().length < min ) {
        o.addClass( "ui-state-error" );
        updateTips( "La taille de " + n + " doit être comprise entre " +
          min + " et " + max + "." );
        return false;
      } else {
        return true;
      }
    }
 
    function checkRegexp( o, regexp, n ) {
      if ( !( regexp.test( o.val() ) ) ) {
        o.addClass( "ui-state-error" );
        updateTips( n );
        return false;
      } else {
        return true;
      }
    }
 
    function addUser() {
      var valid = true;
      allFields.removeClass( "ui-state-error" );
 
      valid = valid && checkLength( name, "username", 3, 16 );
      valid = valid && checkLength( prenom, "username", 3, 16 );
      valid = valid && checkLength( email, "email", 6, 80 );
      valid = valid && checkLength( password, "password", 5, 16 );
 
      valid = valid && checkRegexp( name, /^[a-z]([0-9a-z_\s])+$/i, "Username may consist of a-z, 0-9, underscores, spaces and must begin with a letter." );
      valid = valid && checkRegexp( email, emailRegex, "eg. ui@jquery.com" );
      valid = valid && checkRegexp( password, /^([0-9a-zA-Z])+$/, "Password field only allow : a-z 0-9" );
 
      if ( valid ) {
 
        $( "#users tbody" ).append( "<tr>" +
            "<td>" + name.val() + "</td>" +
            "<td>" + prenom.val() + "</td>" +
            "<td>" + email.val() + "</td>" +
            "<td style='display:none;'>" + password.val() + "</td>" +
            "<td><img src='web/images/'></td>" +
        "</tr>" );
        $( "#users-contain" ).show();
        dialog.dialog( "close" );
      }
      return valid;
    }
 
    dialog = $( "#dialog-form" ).dialog({
      autoOpen: false,
      height: 400,
      width: 350,
      modal: true,
      buttons: {
        "Valider": addUser,
        Annuler: function() {
          dialog.dialog( "close" );
        }
      },
      close: function() {
        form[ 0 ].reset();
        allFields.removeClass( "ui-state-error" );
      }
    });
 
    form = dialog.find( "#userform" ).on( "submit", function( event ) {
      event.preventDefault();
      addUser();
    });
 
    $( "#create-user" ).button().on( "click", function() {
      dialog.dialog( "open" );
    });
 
    $( "#reset-mainform" ).button();
    $( "#submit-mainform" ).button();
  });

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
66
67
68
69
70
71
72
73
74
75
76
77
<div id="dialog-form" title="Ajouter un élève">
        <p class="validateTips">Veuillez renseigner tous les champs du formulaire</p>
 
        <form id="userform" name="userform">
            <fieldset>
                <label for="name">Nom</label>
                <input type="text" name="name" id="name" value="Smith" class="text ui-widget-content ui-corner-all">
                <label for="name">Prénom</label>
                <input type="text" name="prenom" id="prenom" value="Jane" class="text ui-widget-content ui-corner-all">
                <label for="email">Email</label>
                <input type="text" name="email" id="email" value="jane@smith.com" class="text ui-widget-content ui-corner-all">
                <label for="password">Mot de passe</label>
                <input type="password" name="password" id="password" value="xxxxxxx" class="text ui-widget-content ui-corner-all">
 
                <!-- Allow form submission with keyboard without duplicating the dialog button -->
                <input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
            </fieldset>
        </form>
    </div>
 
    <div class="wrapper">
 
       <form id="mainform" name="mainform" method="post" action="/">
	<fieldset>
                <h2>Représentant légal</h2>
 
                <label for="repleg_nom">Nom</label>
                <input type="text" name="nom" id="repleg_nom" class="text ui-widget-content ui-corner-all" />         
 
                <label for="repleg_prenom">Prénom</label>
                <input type="text" name="prenom" id="repleg_prenom" class="text ui-widget-content ui-corner-all" />
 
                <label for="repleg_email">Email</label>                
                <input type="email" name="email" id="repleg_email" class="text ui-widget-content ui-corner-all" />
 
            </fieldset>
 
 
            <h2>Elèves</h2>
            <div id="users-contain" class="ui-widget" style="display:none;">
                <h1>Existing Users:</h1>
                <table id="users" class="ui-widget ui-widget-content">
                    <thead>
                        <tr class="ui-widget-header ">
                            <th>Nom</th>
                            <th>Prénom</th>
                            <th>Email</th>
                            <th style="display:none;">Mot de passe</th>
                            <th>Supprimer</th>
                        </tr>
                    </thead>
                    <tbody>
                        <!--
                        <tr>
                            <td>John Doe</td>
                            <td>john.doe@example.com</td>
                            <td>johndoe1</td>
                        </tr>
                        -->
                    </tbody>
                </table>
            </div>
            <!--<button id="create-user">Create new user</button>-->
            <button id="create-user">Ajouter un élève</button>
 
            <p>
                <button id="reset-mainform" type="reset">Reset</button>
                <button id="submit-mainform" type="submit">Envoyer la demande</button>    
            </p>
 
 
       </form>
 
    </div>
 
</body>
</html>