133 lines
3.9 KiB
HTML
133 lines
3.9 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Retro Cinema Registration</title>
|
|
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.3/themes/swanky-purse/jquery-ui.css">
|
|
<script src="../../lib/jquery.js"></script>
|
|
<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
|
|
<script src="../../dist/jquery.validate.js"></script>
|
|
<script>
|
|
$( function() {
|
|
$.validator.addMethod( "adultsOnly", function( value, element ) {
|
|
if ( $( "#movie .adult:checked" ).val() === "on" ) {
|
|
var now = new Date();
|
|
var dob = $( "#dob" ).datepicker( "getDate" );
|
|
var age = now - dob;
|
|
return Math.floor( age / 31536000000 ) >= 18;
|
|
}
|
|
return true;
|
|
} );
|
|
$( "#movie" ).buttonset();
|
|
$( "#customer, #email, #dob, #reserve" ).button();
|
|
$( "#dob" ).datepicker( {
|
|
changeMonth: true,
|
|
changeYear: true,
|
|
yearRange: "-100:+0",
|
|
maxDate: "+0D"
|
|
} );
|
|
$( "#reservation" ).validate( {
|
|
errorClass: "ui-state-error",
|
|
rules: {
|
|
customer: "required",
|
|
email: {
|
|
required: true,
|
|
email: true
|
|
},
|
|
dob: {
|
|
required: true,
|
|
date: true
|
|
},
|
|
movie: {
|
|
required: true,
|
|
adultsOnly: true
|
|
}
|
|
},
|
|
messages: {
|
|
customer: "Please enter your name",
|
|
email: {
|
|
required: "Please enter your email",
|
|
email: "Please enter a valid email"
|
|
},
|
|
dob: {
|
|
required: "Please enter your dob",
|
|
date: "Please enter a valid date"
|
|
},
|
|
movie: {
|
|
required: "Please choose a movie",
|
|
adultsOnly: "This movie is for adults only!"
|
|
}
|
|
},
|
|
errorPlacement: function( error, element ) {
|
|
if ( element.is( ":radio" ) ) {
|
|
$( "<br>" ).appendTo( element.parent().parent().find( "label:first" ) );
|
|
error.appendTo( element.parent().parent().find( "label:first" ) );
|
|
} else {
|
|
$( "<br>" ).appendTo( element.parent().find( "label" ) );
|
|
error.appendTo( element.parent().find( "label" ) );
|
|
}
|
|
}
|
|
} );
|
|
} );
|
|
</script>
|
|
<style>
|
|
#customer, #email, #dob {
|
|
height: 1.5em;
|
|
width: 20em;
|
|
text-align: left;
|
|
outline: none;
|
|
cursor: text;
|
|
}
|
|
.formlabel {
|
|
float: left;
|
|
width: 12em;
|
|
}
|
|
#reserve {
|
|
margin-left: 12em;
|
|
}
|
|
legend {
|
|
padding: 1em;
|
|
font-size: 1.2em !important;
|
|
}
|
|
div {
|
|
margin: 1em 0 1em 0;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<form id="reservation" method="get" action="">
|
|
<fieldset class="ui-widget ui-widget-content ui-corner-all">
|
|
<legend class="ui-widget ui-widget-header ui-corner-all">Retro Cinema Reservation</legend>
|
|
<div>
|
|
<label for="customer" class="formlabel">Name</label>
|
|
<input type="text" id="customer" name="customer">
|
|
</div>
|
|
<div>
|
|
<label for="email" class="formlabel">Email</label>
|
|
<input type="email" id="email" name="email">
|
|
</div>
|
|
<div>
|
|
<label for="dob" class="formlabel">Date of Birth</label>
|
|
<input type="text" id="dob" name="dob">
|
|
</div>
|
|
<div>
|
|
<label for="movie" class="formlabel">Choose your Movie</label>
|
|
<div id="movie">
|
|
<label for="movie1"><img src="saucer_men.jpg" alt="Invasion of the Saucer Men" style="width:200px;height:300px;"><br>Invasion of the<br>Saucer Men</label>
|
|
<input type="radio" id="movie1" name="movie">
|
|
<label for="movie2"><img src="plan_9.jpg" alt="Plan 9 from Outer Space" style="width:200px;height:300px;"><br>Plan 9 from<br>Outer Space</label>
|
|
<input type="radio" id="movie2" name="movie">
|
|
<label for="movie3"><img src="refer_madness.jpg" alt="Reefer Madness - Adults Only" style="width:200px;height:300px;"><br>Reefer Madness<br>Adults Only</label>
|
|
<input type="radio" id="movie3" name="movie" class="adult">
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<input type="submit" id="reserve" name="reserve" value="reserve">
|
|
</div>
|
|
</fieldset>
|
|
</form>
|
|
|
|
</body>
|
|
</html>
|