diff options
Diffstat (limited to 'demos/dialog/modal-form2.html')
| -rw-r--r-- | demos/dialog/modal-form2.html | 146 |
1 files changed, 0 insertions, 146 deletions
diff --git a/demos/dialog/modal-form2.html b/demos/dialog/modal-form2.html deleted file mode 100644 index 946374743..000000000 --- a/demos/dialog/modal-form2.html +++ /dev/null @@ -1,146 +0,0 @@ -<!doctype html> -<html lang="en"> -<head> - <title>jQuery UI Dialog - Modal form</title> - <link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.3.1.js"></script> - <script type="text/javascript" src="../../ui/ui.core.js"></script> - <script type="text/javascript" src="../../ui/ui.draggable.js"></script> - <script type="text/javascript" src="../../ui/ui.resizable.js"></script> - <script type="text/javascript" src="../../ui/ui.dialog.js"></script> - <script type="text/javascript" src="../../ui/effects.core.js"></script> - <script type="text/javascript" src="../../ui/effects.highlight.js"></script> - <script type="text/javascript" src="../../external/bgiframe/jquery.bgiframe.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <style type="text/css"> - label, input { display:block; } - input.text { margin-bottom:12px; width:95%; } - fieldset { padding:0; border:0; margin-top:25px; } - </style> - <script type="text/javascript"> - $(function() { - var name = $("#name"), - email = $("#email"), - password = $("#password"), - allFields = $([]).add(name).add(email).add(password), - tips = $("#validateTips"); - - function updateTips(t) { - tips.text(t).effect("highlight",{},1500); - } - - function checkLength(o,n,min,max) { - - if ( o.val().length > max || o.val().length < min ) { - o.addClass('ui-state-error'); - updateTips("Length of " + n + " must be between "+min+" and "+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; - } - - } - - $("#dialog").dialog({ - bgiframe: true, - height: 300, - modal: true, - buttons: { - 'Create an account': function() { - var bValid = true; - allFields.removeClass('ui-state-error'); - - bValid = bValid && checkLength(name,"username",3,16); - bValid = bValid && checkLength(email,"email",6,80); - bValid = bValid && checkLength(password,"password",5,16); - - bValid = bValid && checkRegexp(name,/^[a-z]([0-9a-z_])+$/i,"Username may consist of a-z, 0-9, underscores, begin with a letter."); - // From jquery.validate.js (by joern), contributed by Scott Gonzalez: http://projects.scottsplayground.com/email_address_validation/ - 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"); - bValid = bValid && checkRegexp(password,/^([0-9a-zA-Z])+$/,"Password field only allow : a-z 0-9"); - - if (bValid) { - $('#users tbody').append('<tr>' + - '<td>' + name.val() + '</td>' + - '<td>' + email.val() + '</td>' + - '<td>' + password.val() + '</td>' + - '</tr>'); - $(this).dialog('close'); - } - }, - Cancel: function() { - $(this).dialog('close'); - } - }, - close: function() { - allFields.val('').removeClass('ui-state-error'); - } - }); - - $('#create-user').click(function() { - $('#dialog').dialog('open'); - }); - - }); - </script> -</head> -<body> - -<div class="demo"> - -<div id="dialog" title="Create new user"> - <p id="validateTips">All form fields are required.</p> - - <form> - <fieldset> - <label for="name">Name</label> - <input type="text" name="name" id="name" class="text" /> - <label for="email">Email</label> - <input type="text" name="email" id="email" value="" class="text" /> - <label for="password">Password</label> - <input type="password" name="password" id="password" value="" class="text" /> - </fieldset> - </form> -</div> - -<button id="create-user">create new user</button> - -<table id="users"> - <thead> - <tr> - <th>Name</th> - <th>Email</th> - <th>Password</th> - </tr> - </thead> - <tbody> - <tr> - <td>John Doe</td> - <td>john.doe@example.com</td> - <td>johndoe1</td> - </tr> - </tbody> -</table> - -</div><!-- End demo --> - -<div class="demo-description"> - -<p>Use a modal dialog to require that the user enter data during a multi-step process. Embed form markup in the content area, set the <code>modal</code> option to true, and specify primary and secondary user actions with the <code>buttons</code> option.</p> - -</div><!-- End demo-description --> - -</body> -</html> |