4 - 3

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>prva / vtora</title>
		<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
		<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
		<script src="/resources/demos/external/jquery.bgiframe-2.1.2.js"></script>
		<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
		<link rel="stylesheet" type="text/css" href="prva.css" />
		<script type="text/javascript" src="prva.js"></script>
	</head>

	<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 id = $("#sifra"),
		ime = $("#ime"),
		proizvoditel = $("#proizvoditel"),
		datum = $("#datum").datepicker(),
		allFields = $([]).add(id).add(ime).add(proizvoditel),
		tips = $(".validateTips");

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

	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: 400,
		width: 350,
		modal: true,
		buttons: {
			"Додади": function() {
				var bValid = true;
				allFields.removeClass( "ui-state-error" );
				bValid = bValid && checkRegexp(id, /^([0-9])+$/i, "Шифрата треба да	биде составена единствено од броеви.");

				if ( bValid ) {
					$("#users tbody").append("<tr>" +
						"<td>" + id.val() + "</td>" +
						"<td>" + ime.val() + "</td>" +
						"<td>" + proizvoditel.val() + "</td>" +
						"<td>" + datum.val() + "</td>" + "</tr>");

						$(this).dialog("close");
				}
			}, "Откажи": 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 flight">
			<p class="validateTips">
				Сите полиња се задолжителни.
			</p>
			<form>
				<fieldset>
					<label for="sifra">Шифра</label>
					<input type="text" name="sifra" id="sifra" class="text ui-widget-contentui-corner-all" />
					<label for="ime">Авиопревозник</label>
					<input type="text" name="ime" id="ime" value="" class="text ui-widget-content ui-corner-all" />
					<label for="proizvoditel">До</label>
					<input type="text" name="proizvoditel" id="proizvoditel" value="" class="text ui-widget-content ui-corner-all" />
					<label for="datum">Класа</label>
					<select>
  <option value="volvo">Бизнис</option>
  <option value="saab">сас</option>
  <option value="mercedes">Mдадаercedes</option>
  <option value="audi">Auдадdi</option>
</select>
				</fieldset>
			</form>
		</div>
		<div id="users-contain" class="ui-widget">
			<h1>Постоечки ставки:</h1>
			<table id="users" class="ui-widget ui-widget-content">
				<thead>
					<tr class="ui-widget-header">
						<th>Шифра</th>
						<th>Авиопревозник</th>
						<th>До</th>
						<th>Класа</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>12331</td>
						<td>Wizz Air</td>
						<td>London</td>
						<td>Бизнис</td>
					</tr>
				</tbody>
			</table>
		</div>
		<button id="create-user">
			Додади нова ставка
		</button>
	</body>
</html>