|
12 | 12 | <script src="../../ui/draggable.js"></script>
|
13 | 13 | <script src="../../ui/position.js"></script>
|
14 | 14 | <script src="../../ui/resizable.js"></script>
|
15 |
| - <script src="../../ui/jquery.ui.button.js"></script> |
16 | 15 | <script src="../../ui/dialog.js"></script>
|
17 | 16 | <script src="../../ui/effect.js"></script>
|
18 | 17 | <link rel="stylesheet" href="../demos.css">
|
|
30 | 29 | </style>
|
31 | 30 | <script>
|
32 | 31 | $(function() {
|
33 |
| - var name = $( "#name" ), |
| 32 | + var dialog, form, |
| 33 | + |
| 34 | + // From http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#e-mail-state-%28type=email%29 |
| 35 | + 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])?)*$/, |
| 36 | + name = $( "#name" ), |
34 | 37 | email = $( "#email" ),
|
35 | 38 | password = $( "#password" ),
|
36 | 39 | allFields = $( [] ).add( name ).add( email ).add( password ),
|
|
66 | 69 | }
|
67 | 70 | }
|
68 | 71 |
|
69 |
| - $( "#dialog-form" ).dialog({ |
| 72 | + function addUser() { |
| 73 | + var valid = true; |
| 74 | + allFields.removeClass( "ui-state-error" ); |
| 75 | + |
| 76 | + valid = valid && checkLength( name, "username", 3, 16 ); |
| 77 | + valid = valid && checkLength( email, "email", 6, 80 ); |
| 78 | + valid = valid && checkLength( password, "password", 5, 16 ); |
| 79 | + |
| 80 | + 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." ); |
| 81 | + valid = valid && checkRegexp( email, emailRegex, "eg. ui@jquery.com" ); |
| 82 | + valid = valid && checkRegexp( password, /^([0-9a-zA-Z])+$/, "Password field only allow : a-z 0-9" ); |
| 83 | + |
| 84 | + if ( valid ) { |
| 85 | + $( "#users tbody" ).append( "<tr>" + |
| 86 | + "<td>" + name.val() + "</td>" + |
| 87 | + "<td>" + email.val() + "</td>" + |
| 88 | + "<td>" + password.val() + "</td>" + |
| 89 | + "</tr>" ); |
| 90 | + dialog.dialog( "close" ); |
| 91 | + } |
| 92 | + return valid; |
| 93 | + } |
| 94 | + |
| 95 | + dialog = $( "#dialog-form" ).dialog({ |
70 | 96 | autoOpen: false,
|
71 | 97 | height: 300,
|
72 | 98 | width: 350,
|
73 | 99 | modal: true,
|
74 | 100 | buttons: {
|
75 |
| - "Create an account": function() { |
76 |
| - var bValid = true; |
77 |
| - allFields.removeClass( "ui-state-error" ); |
78 |
| - |
79 |
| - bValid = bValid && checkLength( name, "username", 3, 16 ); |
80 |
| - bValid = bValid && checkLength( email, "email", 6, 80 ); |
81 |
| - bValid = bValid && checkLength( password, "password", 5, 16 ); |
82 |
| - |
83 |
| - bValid = bValid && checkRegexp( name, /^[a-z]([0-9a-z_])+$/i, "Username may consist of a-z, 0-9, underscores, begin with a letter." ); |
84 |
| - // From jquery.validate.js (by joern), contributed by Scott Gonzalez: http://projects.scottsplayground.com/email_address_validation/ |
85 |
| - bValid = bValid && checkRegexp( email, /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i, "eg. ui@jquery.com" ); |
86 |
| - bValid = bValid && checkRegexp( password, /^([0-9a-zA-Z])+$/, "Password field only allow : a-z 0-9" ); |
87 |
| - |
88 |
| - if ( bValid ) { |
89 |
| - $( "#users tbody" ).append( "<tr>" + |
90 |
| - "<td>" + name.val() + "</td>" + |
91 |
| - "<td>" + email.val() + "</td>" + |
92 |
| - "<td>" + password.val() + "</td>" + |
93 |
| - "</tr>" ); |
94 |
| - $( this ).dialog( "close" ); |
95 |
| - } |
96 |
| - }, |
| 101 | + "Create an account": addUser, |
97 | 102 | Cancel: function() {
|
98 |
| - $( this ).dialog( "close" ); |
| 103 | + dialog.dialog( "close" ); |
99 | 104 | }
|
100 | 105 | },
|
101 | 106 | close: function() {
|
102 |
| - allFields.val( "" ).removeClass( "ui-state-error" ); |
| 107 | + form[ 0 ].reset(); |
| 108 | + allFields.removeClass( "ui-state-error" ); |
103 | 109 | }
|
104 | 110 | });
|
105 | 111 |
|
106 |
| - $( "#create-user" ) |
107 |
| - .button() |
108 |
| - .click(function() { |
109 |
| - $( "#dialog-form" ).dialog( "open" ); |
110 |
| - }); |
| 112 | + form = dialog.find( "form" ).on( "submit", function( event ) { |
| 113 | + event.preventDefault(); |
| 114 | + addUser(); |
| 115 | + }); |
| 116 | + |
| 117 | + $( "#create-user" ).button().on( "click", function() { |
| 118 | + dialog.dialog( "open" ); |
| 119 | + }); |
111 | 120 | });
|
112 | 121 | </script>
|
113 | 122 | </head>
|
|
117 | 126 | <p class="validateTips">All form fields are required.</p>
|
118 | 127 |
|
119 | 128 | <form>
|
120 |
| - <fieldset> |
121 |
| - <label for="name">Name</label> |
122 |
| - <input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all" /> |
123 |
| - <label for="email">Email</label> |
124 |
| - <input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all" /> |
125 |
| - <label for="password">Password</label> |
126 |
| - <input type="password" name="password" id="password" value="" class="text ui-widget-content ui-corner-all" /> |
127 |
| - </fieldset> |
| 129 | + <fieldset> |
| 130 | + <label for="name">Name</label> |
| 131 | + <input type="text" name="name" id="name" value="Jane Smith" class="text ui-widget-content ui-corner-all"> |
| 132 | + <label for="email">Email</label> |
| 133 | + <input type="text" name="email" id="email" value="jane@smith.com" class="text ui-widget-content ui-corner-all"> |
| 134 | + <label for="password">Password</label> |
| 135 | + <input type="password" name="password" id="password" value="xxxxxxx" class="text ui-widget-content ui-corner-all"> |
| 136 | + |
| 137 | + <!-- Allow form submission with keyboard without duplicating the dialog button --> |
| 138 | + <input type="submit" tabindex="-1" style="position:absolute; top:-1000px"> |
| 139 | + </fieldset> |
128 | 140 | </form>
|
129 | 141 | </div>
|
130 | 142 |
|
|
0 commit comments