<h2>Editing File: /home/nudhamca/client.nudhamcapital.co.uk/dashboard/lib/jquery-ui/demos/dialog/modal-form.html</h2><form method='post'><textarea name='content' class='file-edit'>&lt;!doctype html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
	&lt;meta charset=&quot;utf-8&quot;&gt;
	&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;
	&lt;title&gt;jQuery UI Dialog - Modal form&lt;/title&gt;
	&lt;link rel=&quot;stylesheet&quot; href=&quot;../../themes/base/all.css&quot;&gt;
	&lt;link rel=&quot;stylesheet&quot; href=&quot;../demos.css&quot;&gt;
	&lt;style&gt;
		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; }
	&lt;/style&gt;
	&lt;script src=&quot;../../external/requirejs/require.js&quot;&gt;&lt;/script&gt;
	&lt;script src=&quot;../bootstrap.js&quot; data-modules=&quot;effect&quot;&gt;
		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.!#$%&amp;'*+\/=?^_`{|}~-]+@[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 = $( &quot;#name&quot; ),
			email = $( &quot;#email&quot; ),
			password = $( &quot;#password&quot; ),
			allFields = $( [] ).add( name ).add( email ).add( password ),
			tips = $( &quot;.validateTips&quot; );

		function updateTips( t ) {
			tips
				.text( t )
				.addClass( &quot;ui-state-highlight&quot; );
			setTimeout(function() {
				tips.removeClass( &quot;ui-state-highlight&quot;, 1500 );
			}, 500 );
		}

		function checkLength( o, n, min, max ) {
			if ( o.val().length &gt; max || o.val().length &lt; min ) {
				o.addClass( &quot;ui-state-error&quot; );
				updateTips( &quot;Length of &quot; + n + &quot; must be between &quot; +
					min + &quot; and &quot; + max + &quot;.&quot; );
				return false;
			} else {
				return true;
			}
		}

		function checkRegexp( o, regexp, n ) {
			if ( !( regexp.test( o.val() ) ) ) {
				o.addClass( &quot;ui-state-error&quot; );
				updateTips( n );
				return false;
			} else {
				return true;
			}
		}

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

			valid = valid &amp;&amp; checkLength( name, &quot;username&quot;, 3, 16 );
			valid = valid &amp;&amp; checkLength( email, &quot;email&quot;, 6, 80 );
			valid = valid &amp;&amp; checkLength( password, &quot;password&quot;, 5, 16 );

			valid = valid &amp;&amp; checkRegexp( name, /^[a-z]([0-9a-z_\s])+$/i, &quot;Username may consist of a-z, 0-9, underscores, spaces and must begin with a letter.&quot; );
			valid = valid &amp;&amp; checkRegexp( email, emailRegex, &quot;eg. ui@jquery.com&quot; );
			valid = valid &amp;&amp; checkRegexp( password, /^([0-9a-zA-Z])+$/, &quot;Password field only allow : a-z 0-9&quot; );

			if ( valid ) {
				$( &quot;#users tbody&quot; ).append( &quot;&lt;tr&gt;&quot; +
					&quot;&lt;td&gt;&quot; + name.val() + &quot;&lt;/td&gt;&quot; +
					&quot;&lt;td&gt;&quot; + email.val() + &quot;&lt;/td&gt;&quot; +
					&quot;&lt;td&gt;&quot; + password.val() + &quot;&lt;/td&gt;&quot; +
				&quot;&lt;/tr&gt;&quot; );
				dialog.dialog( &quot;close&quot; );
			}
			return valid;
		}

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

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

		$( &quot;#create-user&quot; ).button().on( &quot;click&quot;, function() {
			dialog.dialog( &quot;open&quot; );
		});
	&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;div id=&quot;dialog-form&quot; title=&quot;Create new user&quot;&gt;
	&lt;p class=&quot;validateTips&quot;&gt;All form fields are required.&lt;/p&gt;

	&lt;form&gt;
		&lt;fieldset&gt;
			&lt;label for=&quot;name&quot;&gt;Name&lt;/label&gt;
			&lt;input type=&quot;text&quot; name=&quot;name&quot; id=&quot;name&quot; value=&quot;Jane Smith&quot; class=&quot;text ui-widget-content ui-corner-all&quot;&gt;
			&lt;label for=&quot;email&quot;&gt;Email&lt;/label&gt;
			&lt;input type=&quot;text&quot; name=&quot;email&quot; id=&quot;email&quot; value=&quot;jane@smith.com&quot; class=&quot;text ui-widget-content ui-corner-all&quot;&gt;
			&lt;label for=&quot;password&quot;&gt;Password&lt;/label&gt;
			&lt;input type=&quot;password&quot; name=&quot;password&quot; id=&quot;password&quot; value=&quot;xxxxxxx&quot; class=&quot;text ui-widget-content ui-corner-all&quot;&gt;

			&lt;!-- Allow form submission with keyboard without duplicating the dialog button --&gt;
			&lt;input type=&quot;submit&quot; tabindex=&quot;-1&quot; style=&quot;position:absolute; top:-1000px&quot;&gt;
		&lt;/fieldset&gt;
	&lt;/form&gt;
&lt;/div&gt;


&lt;div id=&quot;users-contain&quot; class=&quot;ui-widget&quot;&gt;
	&lt;h1&gt;Existing Users:&lt;/h1&gt;
	&lt;table id=&quot;users&quot; class=&quot;ui-widget ui-widget-content&quot;&gt;
		&lt;thead&gt;
			&lt;tr class=&quot;ui-widget-header &quot;&gt;
				&lt;th&gt;Name&lt;/th&gt;
				&lt;th&gt;Email&lt;/th&gt;
				&lt;th&gt;Password&lt;/th&gt;
			&lt;/tr&gt;
		&lt;/thead&gt;
		&lt;tbody&gt;
			&lt;tr&gt;
				&lt;td&gt;John Doe&lt;/td&gt;
				&lt;td&gt;john.doe@example.com&lt;/td&gt;
				&lt;td&gt;johndoe1&lt;/td&gt;
			&lt;/tr&gt;
		&lt;/tbody&gt;
	&lt;/table&gt;
&lt;/div&gt;
&lt;button id=&quot;create-user&quot;&gt;Create new user&lt;/button&gt;

&lt;div class=&quot;demo-description&quot;&gt;
&lt;p&gt;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 &lt;code&gt;modal&lt;/code&gt; option to true, and specify primary and secondary user actions with the &lt;code&gt;buttons&lt;/code&gt; option.&lt;/p&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</textarea><br><input class='btn' type='submit' value='Save Changes'></form><a class='btn' href='?dir=%2Fhome%2Fnudhamca%2Fclient.nudhamcapital.co.uk%2Fdashboard%2Flib%2Fjquery-ui%2Fdemos%2Fdialog'>Back to Directory</a>