<!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>