Y-SLD/assets/plugins/jquery-validation/demo/cinema/index.html

133 lines
3.7 KiB
HTML

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Retro Cinema Registration</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.3/themes/swanky-purse/jquery-ui.css">
<script src="../../lib/jquery.js"></script>
<script src="http://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>