5 - 1

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Прва задача</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"),
		lokacija = $("#do"),
		klasa = $("#klasa"),
		allFields = $([]).add(id).add(ime).add(lokacija),
		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>" + lokacija.val() + "</td>" +
						"<td>" + klasa.val() + "</td>" + "</tr>");
						$(this).dialog("close");
				}
			}, "Откажи": function() {
				$(this).dialog("close");
			}
		}, close: function() {
			allFields.val( "" ).removeClass( "ui-state-error" );
		}
	});

	$( "#create-user" ).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="do">До</label>
					<input type="text" name="do" id="do" value="" class="text ui-widget-content ui-corner-all" />
					<label for="klasa">Класа</label>
					<select id="klasa">
  						<option value="Бизнис">Бизнис</option>
  						<option value="Економска">Економска</option>
  						<option value="Прва">Прва</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>