<!doctype html>
<meta charset= "Utf-8" >
<title>jquery UI dialog box (Dialog)-Modal form </title>
<link rel= "stylesheet" href= "//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css" >
<script src= "//apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js" ></script>
<script src= "//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js" ></script>
<link rel= "stylesheet" href= "Jqueryui/style.css" >
<style>
body {font-size:62.5%;}
Label, input {display:block;}
input.text {margin-bottom:12px; width:95%; padding:. 4em;}
fieldset {padding:0; border:0; margin-top:25px;}
h1 {font-size:1.2em; margin:. 6em 0;}
Div#users-contain {width:350px; margin:20px 0;}
Div#users-contain Table {margin:1em 0; border-collapse:collapse; width:100%;}
Div#users-contain table TD, Div#users-contain table th {border:1px solid #eee; padding:. 6em 10px; text-align:left;}
. ui-dialog. ui-state-error {padding:. 3em;}
. validatetips {border:1px solid transparent; padding:0.3em;}
</style>
<script>
$ (function () {
var name = $ ("#name"),
email = $ ("#email"),
Password = $ ("#password"),
AllFields = $ ([]). Add (Name). 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");
The length of the updatetips ("+ n +" must be in the "+
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-form"). Dialog ({
Autoopen:false,
HEIGHT:300,
WIDTH:350,
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, "The user name must consist of a-Z, 0-9, underscore, and must start 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. [email protected] ");
Bvalid = bvalid && checkregexp (password,/^ ([0-9a-za-z]) +$/, "password field only allowed: 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")
. Button ()
. Click (function () {
$ ("#dialog-form"). Dialog ("Open");
});
});
</script>
<body>
<div id= "Dialog-form" title= "Create new User" >
<p class= "Validatetips" > All form fields are required. </p>
<form>
<fieldset>
<label for= "name" > Name </label>
<input type= "text" name= "name" id= "name" class= "text ui-widget-content ui-corner-all" >
<label for= "Email" > Email </label>
<input type= "text" name= "email" id= "email" value= "" class= "text ui-widget-content ui-corner-all" >
<label for= "password" > Password </label>
<input type= "password" name= "password" id= "password" value= "" class= "text ui-widget-content ui-corner-all" >
</fieldset>
</form>
</div>
<div id= "Users-contain" class= "Ui-widget" >
<table id= "Users" class= "Ui-widget ui-widget-content" >
<thead>
<tr class= "Ui-widget-header" >
<th> name </th>
<th> Email </th>
<th> Password </th>
</tr>
</thead>
<tbody>
<tr>
<td>john doe</td>
<td>[email protected]</td>
<td>johndoe1</td>
</tr>
</tbody>
</table>
</div>
<button id= "Create-user" > Create new User </button>
</body>
JQuery UI dialog box (Dialog)-modal form