jquery-ui/demos/dialog/modal-form.html

<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Dialog - Modal form</title>
	<link rel="stylesheet" href="../../themes/base/all.css">
	<script src="../../external/jquery/jquery.js"></script>
	<script src="../../ui/core.js"></script>
	<script src="../../ui/widget.js"></script>
	<script src="../../ui/mouse.js"></script>
	<script src="../../ui/button.js"></script>
	<script src="../../ui/draggable.js"></script>
	<script src="../../ui/position.js"></script>
	<script src="../../ui/resizable.js"></script>
	<script src="../../ui/dialog.js"></script>
	<script src="../../ui/effect.js"></script>
	<link rel="stylesheet" href="../demos.css">
	<style>
		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 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" ),
			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( "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;
			}
		}

		function addUser() {
			var valid = true;
			allFields.removeClass( "ui-state-error" );

			valid = valid && checkLength( name, "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>" + email.val() + "</td>" +
					"<td>" + password.val() + "</td>" +
				"</tr>" );
				dialog.dialog( "close" );
			}
			return valid;
		}

		dialog = $( "#dialog-form" ).dialog({
			autoOpen: false,
			height: 400,
			width: 350,
			modal: true,
			buttons: {
				"Create an account": addUser,
				Cancel: function() {
					dialog.dialog( "close" );
				}
			},
			close: function() {
				form[ 0 ].reset();
				allFields.removeClass( "ui-state-error" );
			}
		});

		form = dialog.find( "form" ).on( "submit", function( event ) {
			event.preventDefault();
			addUser();
		});

		$( "#create-user" ).button().on( "click", function() {
			dialog.dialog( "open" );
		});
	});
	</script>
</head>
<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" value="Jane Smith" 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">Password</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 id="users-contain" class="ui-widget">
	<h1>Existing Users:</h1>
	<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>john.doe@example.com</td>
				<td>johndoe1</td>
			</tr>
		</tbody>
	</table>
</div>
<button id="create-user">Create new user</button>

<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>
</body>
</html>
Demos: Cleanup. 2012-09-10 15:33:46 +00:00			`<!doctype html>`
demos: whitespace fixes - trailing whitespace - inconsistent line endings - set svn:eol-style to native 2008-12-31 01:20:50 +00:00			`<html lang="en">`
			`<head>`
Dialog demos: Coding standards. 2010-09-10 13:01:54 +00:00			`<meta charset="utf-8">`
slightly reorganized/renamed demos to better reflect functionality 2009-01-20 20:09:55 +00:00			`<title>jQuery UI Dialog - Modal form</title>`
All: Rename all files, removing the "jquery.ui." prefix; - By executing https://gist.github.com/jzaefferer/893fcf70b7eebc1dc271; Fixes #9464 Closes gh-1029 2013-12-02 18:36:12 +00:00			`<link rel="stylesheet" href="../../themes/base/all.css">`
Build: Reorganize external directory Put each external library into its own directory. Move jquery.js to external. Ref gh-1266 2014-06-10 11:55:45 +00:00			`<script src="../../external/jquery/jquery.js"></script>`
All: Rename all files, removing the "jquery.ui." prefix; - By executing https://gist.github.com/jzaefferer/893fcf70b7eebc1dc271; Fixes #9464 Closes gh-1029 2013-12-02 18:36:12 +00:00			`<script src="../../ui/core.js"></script>`
			`<script src="../../ui/widget.js"></script>`
			`<script src="../../ui/mouse.js"></script>`
			`<script src="../../ui/button.js"></script>`
			`<script src="../../ui/draggable.js"></script>`
			`<script src="../../ui/position.js"></script>`
			`<script src="../../ui/resizable.js"></script>`
			`<script src="../../ui/dialog.js"></script>`
			`<script src="../../ui/effect.js"></script>`
Dialog demos: Coding standards. 2010-09-10 13:01:54 +00:00			`<link rel="stylesheet" href="../demos.css">`
			`<style>`
demos/dialog/modal_form.html: markup tweaks 2008-12-31 06:32:43 +00:00			`label, input { display:block; }`
tossed some framework classes on it, adjusted style. Set autoOpen to false - otherwise the purpose of the dialog is lost on the user 2009-01-29 21:48:09 +00:00			`input.text { margin-bottom:12px; width:95%; padding: .4em; }`
demos/dialog/modal_form.html: markup tweaks 2008-12-31 06:32:43 +00:00			`fieldset { padding:0; border:0; margin-top:25px; }`
tossed some framework classes on it, adjusted style. Set autoOpen to false - otherwise the purpose of the dialog is lost on the user 2009-01-29 21:48:09 +00:00			`h1 { font-size: 1.2em; margin: .6em 0; }`
Dialog demo: Removed misplaced !important. 2009-04-18 19:09:41 +00:00			`div#users-contain { width: 350px; margin: 20px 0; }`
tossed some framework classes on it, adjusted style. Set autoOpen to false - otherwise the purpose of the dialog is lost on the user 2009-01-29 21:48:09 +00:00			`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; }`
Dialog demo: Use the ui-state-highlight class instead of a hard-coded color. Fixes #4808 - Modal dialog form validation demo - error message uses hard-coded color. 2009-08-29 02:12:56 +00:00			`.ui-dialog .ui-state-error { padding: .3em; }`
			`.validateTips { border: 1px solid transparent; padding: 0.3em; }`
demos/dialog/modal_form.html: markup tweaks 2008-12-31 06:32:43 +00:00			`</style>`
Dialog demos: Coding standards. 2010-09-10 13:01:54 +00:00			`<script>`
demos: whitespace fixes - trailing whitespace - inconsistent line endings - set svn:eol-style to native 2008-12-31 01:20:50 +00:00			`$(function() {`
Dialog demo: Update modal form demo - Removes an invalid jquery.ui.button.js reference (button.js is loaded) - Updates the email regex to use the one from the HTML5 spec - Refactors the code to add the user on both button click and form submit - Reset the form to its original state on submit - Initialize the form with values that can be submitted immediately, better for a demo - Rename bValid to valid 2014-04-24 17:19:50 +00:00			`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" ),`
Dialog demos: Coding standards. 2010-09-10 13:01:54 +00:00			`email = $( "#email" ),`
			`password = $( "#password" ),`
			`allFields = $( [] ).add( name ).add( email ).add( password ),`
			`tips = $( ".validateTips" );`
demos dialog: Replaced old modal form with new functioning one. Thanks Scott G and Cloudream. 2009-01-29 20:14:30 +00:00
Dialog demos: Coding standards. 2010-09-10 13:01:54 +00:00			`function updateTips( t ) {`
Dialog demo: Use the ui-state-highlight class instead of a hard-coded color. Fixes #4808 - Modal dialog form validation demo - error message uses hard-coded color. 2009-08-29 02:12:56 +00:00			`tips`
Dialog demos: Coding standards. 2010-09-10 13:01:54 +00:00			`.text( t )`
			`.addClass( "ui-state-highlight" );`
Dialog demo: Use the ui-state-highlight class instead of a hard-coded color. Fixes #4808 - Modal dialog form validation demo - error message uses hard-coded color. 2009-08-29 02:12:56 +00:00			`setTimeout(function() {`
Dialog demos: Coding standards. 2010-09-10 13:01:54 +00:00			`tips.removeClass( "ui-state-highlight", 1500 );`
			`}, 500 );`
demos dialog: Replaced old modal form with new functioning one. Thanks Scott G and Cloudream. 2009-01-29 20:14:30 +00:00			`}`

Dialog demos: Coding standards. 2010-09-10 13:01:54 +00:00			`function checkLength( o, n, min, max ) {`
demos dialog: Replaced old modal form with new functioning one. Thanks Scott G and Cloudream. 2009-01-29 20:14:30 +00:00			`if ( o.val().length > max \|\| o.val().length < min ) {`
Dialog demos: Coding standards. 2010-09-10 13:01:54 +00:00			`o.addClass( "ui-state-error" );`
			`updateTips( "Length of " + n + " must be between " +`
			`min + " and " + max + "." );`
demos dialog: Replaced old modal form with new functioning one. Thanks Scott G and Cloudream. 2009-01-29 20:14:30 +00:00			`return false;`
			`} else {`
			`return true;`
			`}`
			`}`

Dialog demos: Coding standards. 2010-09-10 13:01:54 +00:00			`function checkRegexp( o, regexp, n ) {`
demos dialog: Replaced old modal form with new functioning one. Thanks Scott G and Cloudream. 2009-01-29 20:14:30 +00:00			`if ( !( regexp.test( o.val() ) ) ) {`
Dialog demos: Coding standards. 2010-09-10 13:01:54 +00:00			`o.addClass( "ui-state-error" );`
			`updateTips( n );`
demos dialog: Replaced old modal form with new functioning one. Thanks Scott G and Cloudream. 2009-01-29 20:14:30 +00:00			`return false;`
			`} else {`
			`return true;`
			`}`
			`}`
Demos: Cleanup. 2012-09-10 15:33:46 +00:00
Dialog demo: Update modal form demo - Removes an invalid jquery.ui.button.js reference (button.js is loaded) - Updates the email regex to use the one from the HTML5 spec - Refactors the code to add the user on both button click and form submit - Reset the form to its original state on submit - Initialize the form with values that can be submitted immediately, better for a demo - Rename bValid to valid 2014-04-24 17:19:50 +00:00			`function addUser() {`
			`var valid = true;`
			`allFields.removeClass( "ui-state-error" );`

			`valid = valid && checkLength( name, "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>" + email.val() + "</td>" +`
			`"<td>" + password.val() + "</td>" +`
			`"</tr>" );`
			`dialog.dialog( "close" );`
			`}`
			`return valid;`
			`}`

			`dialog = $( "#dialog-form" ).dialog({`
tossed some framework classes on it, adjusted style. Set autoOpen to false - otherwise the purpose of the dialog is lost on the user 2009-01-29 21:48:09 +00:00			`autoOpen: false,`
Dialog: Updating demo style based on changes to theme and demo CSS Fixes #10693 Closes #1385 2014-11-08 12:39:30 +00:00			`height: 400,`
Dialog demo: Use the ui-state-highlight class instead of a hard-coded color. Fixes #4808 - Modal dialog form validation demo - error message uses hard-coded color. 2009-08-29 02:12:56 +00:00			`width: 350,`
Re-vamped set of dialog examples that shows the standard set of dialog types. Removed button.html because it was expanded into the 3 modal types. 2008-12-29 17:26:17 +00:00			`modal: true,`
			`buttons: {`
Dialog demo: Update modal form demo - Removes an invalid jquery.ui.button.js reference (button.js is loaded) - Updates the email regex to use the one from the HTML5 spec - Refactors the code to add the user on both button click and form submit - Reset the form to its original state on submit - Initialize the form with values that can be submitted immediately, better for a demo - Rename bValid to valid 2014-04-24 17:19:50 +00:00			`"Create an account": addUser,`
Re-vamped set of dialog examples that shows the standard set of dialog types. Removed button.html because it was expanded into the 3 modal types. 2008-12-29 17:26:17 +00:00			`Cancel: function() {`
Dialog demo: Update modal form demo - Removes an invalid jquery.ui.button.js reference (button.js is loaded) - Updates the email regex to use the one from the HTML5 spec - Refactors the code to add the user on both button click and form submit - Reset the form to its original state on submit - Initialize the form with values that can be submitted immediately, better for a demo - Rename bValid to valid 2014-04-24 17:19:50 +00:00			`dialog.dialog( "close" );`
Re-vamped set of dialog examples that shows the standard set of dialog types. Removed button.html because it was expanded into the 3 modal types. 2008-12-29 17:26:17 +00:00			`}`
demos dialog: Replaced old modal form with new functioning one. Thanks Scott G and Cloudream. 2009-01-29 20:14:30 +00:00			`},`
			`close: function() {`
Dialog demo: Update modal form demo - Removes an invalid jquery.ui.button.js reference (button.js is loaded) - Updates the email regex to use the one from the HTML5 spec - Refactors the code to add the user on both button click and form submit - Reset the form to its original state on submit - Initialize the form with values that can be submitted immediately, better for a demo - Rename bValid to valid 2014-04-24 17:19:50 +00:00			`form[ 0 ].reset();`
			`allFields.removeClass( "ui-state-error" );`
Re-vamped set of dialog examples that shows the standard set of dialog types. Removed button.html because it was expanded into the 3 modal types. 2008-12-29 17:26:17 +00:00			`}`
demos: whitespace fixes - trailing whitespace - inconsistent line endings - set svn:eol-style to native 2008-12-31 01:20:50 +00:00			`});`
Dialog demos: Coding standards. 2010-09-10 13:01:54 +00:00
Dialog demo: Update modal form demo - Removes an invalid jquery.ui.button.js reference (button.js is loaded) - Updates the email regex to use the one from the HTML5 spec - Refactors the code to add the user on both button click and form submit - Reset the form to its original state on submit - Initialize the form with values that can be submitted immediately, better for a demo - Rename bValid to valid 2014-04-24 17:19:50 +00:00			`form = dialog.find( "form" ).on( "submit", function( event ) {`
			`event.preventDefault();`
			`addUser();`
			`});`

			`$( "#create-user" ).button().on( "click", function() {`
			`dialog.dialog( "open" );`
			`});`
demos: whitespace fixes - trailing whitespace - inconsistent line endings - set svn:eol-style to native 2008-12-31 01:20:50 +00:00			`});`
			`</script>`
			`</head>`
			`<body>`

workaround for #4375 2009-07-11 14:00:08 +00:00			`<div id="dialog-form" title="Create new user">`
Dialog demo: Use the ui-state-highlight class instead of a hard-coded color. Fixes #4808 - Modal dialog form validation demo - error message uses hard-coded color. 2009-08-29 02:12:56 +00:00			`<p class="validateTips">All form fields are required.</p>`
demos: whitespace fixes - trailing whitespace - inconsistent line endings - set svn:eol-style to native 2008-12-31 01:20:50 +00:00
			`<form>`
Dialog demo: Update modal form demo - Removes an invalid jquery.ui.button.js reference (button.js is loaded) - Updates the email regex to use the one from the HTML5 spec - Refactors the code to add the user on both button click and form submit - Reset the form to its original state on submit - Initialize the form with values that can be submitted immediately, better for a demo - Rename bValid to valid 2014-04-24 17:19:50 +00:00			`<fieldset>`
			`<label for="name">Name</label>`
			`<input type="text" name="name" id="name" value="Jane Smith" 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">Password</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>`
demos: whitespace fixes - trailing whitespace - inconsistent line endings - set svn:eol-style to native 2008-12-31 01:20:50 +00:00			`</form>`
Added demo wrapper divs, description text and improved sample data 2008-12-30 17:47:22 +00:00			`</div>`
demos: whitespace fixes - trailing whitespace - inconsistent line endings - set svn:eol-style to native 2008-12-31 01:20:50 +00:00
tossed some framework classes on it, adjusted style. Set autoOpen to false - otherwise the purpose of the dialog is lost on the user 2009-01-29 21:48:09 +00:00
			`<div id="users-contain" class="ui-widget">`
Dialog demos: Coding standards. 2010-09-10 13:01:54 +00:00			`<h1>Existing Users:</h1>`
tossed some framework classes on it, adjusted style. Set autoOpen to false - otherwise the purpose of the dialog is lost on the user 2009-01-29 21:48:09 +00:00			`<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>john.doe@example.com</td>`
			`<td>johndoe1</td>`
			`</tr>`
			`</tbody>`
			`</table>`
			`</div>`
Merged in /branches/dev r3251:3620 (excluding autocomplete, modal, tooltip, menu; including menu static tests). 2010-01-07 03:19:50 +00:00			`<button id="create-user">Create new user</button>`
Re-vamped set of dialog examples that shows the standard set of dialog types. Removed button.html because it was expanded into the 3 modal types. 2008-12-29 17:26:17 +00:00
Dialog demos: Coding standards. 2010-09-10 13:01:54 +00:00			`<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>`
Demos: Cleanup. 2012-09-10 15:33:46 +00:00			`</div>`
demos: whitespace fixes - trailing whitespace - inconsistent line endings - set svn:eol-style to native 2008-12-31 01:20:50 +00:00			`</body>`
			`</html>`