1*0Sstevel@tonic-gate#!/usr/local/bin/perl 2*0Sstevel@tonic-gate 3*0Sstevel@tonic-gate# This script illustrates how to use JavaScript to validate fill-out 4*0Sstevel@tonic-gate# forms. 5*0Sstevel@tonic-gateuse CGI qw(:standard); 6*0Sstevel@tonic-gate 7*0Sstevel@tonic-gate# Here's the javascript code that we include in the document. 8*0Sstevel@tonic-gate$JSCRIPT=<<EOF; 9*0Sstevel@tonic-gate // validate that the user is the right age. Return 10*0Sstevel@tonic-gate // false to prevent the form from being submitted. 11*0Sstevel@tonic-gate function validateForm() { 12*0Sstevel@tonic-gate var today = new Date(); 13*0Sstevel@tonic-gate var birthday = validateDate(document.form1.birthdate); 14*0Sstevel@tonic-gate if (birthday == 0) { 15*0Sstevel@tonic-gate document.form1.birthdate.focus() 16*0Sstevel@tonic-gate document.form1.birthdate.select(); 17*0Sstevel@tonic-gate return false; 18*0Sstevel@tonic-gate } 19*0Sstevel@tonic-gate var milliseconds = today.getTime()-birthday; 20*0Sstevel@tonic-gate var years = milliseconds/(1000 * 60 * 60 * 24 * 365.25); 21*0Sstevel@tonic-gate if ((years > 20) || (years < 5)) { 22*0Sstevel@tonic-gate alert("You must be between the ages of 5 and 20 to submit this form"); 23*0Sstevel@tonic-gate document.form1.birthdate.focus(); 24*0Sstevel@tonic-gate document.form1.birthdate.select(); 25*0Sstevel@tonic-gate return false; 26*0Sstevel@tonic-gate } 27*0Sstevel@tonic-gate // Since we've calculated the age in years already, 28*0Sstevel@tonic-gate // we might as well send it up to our CGI script. 29*0Sstevel@tonic-gate document.form1.age.value=Math.floor(years); 30*0Sstevel@tonic-gate return true; 31*0Sstevel@tonic-gate } 32*0Sstevel@tonic-gate 33*0Sstevel@tonic-gate // make sure that the contents of the supplied 34*0Sstevel@tonic-gate // field contain a valid date. 35*0Sstevel@tonic-gate function validateDate(element) { 36*0Sstevel@tonic-gate var date = Date.parse(element.value); 37*0Sstevel@tonic-gate if (0 == date) { 38*0Sstevel@tonic-gate alert("Please enter date in format MMM DD, YY"); 39*0Sstevel@tonic-gate element.focus(); 40*0Sstevel@tonic-gate element.select(); 41*0Sstevel@tonic-gate } 42*0Sstevel@tonic-gate return date; 43*0Sstevel@tonic-gate } 44*0Sstevel@tonic-gate 45*0Sstevel@tonic-gate // Compliments, compliments 46*0Sstevel@tonic-gate function doPraise(element) { 47*0Sstevel@tonic-gate if (element.checked) { 48*0Sstevel@tonic-gate self.status=element.value + " is an excellent choice!"; 49*0Sstevel@tonic-gate return true; 50*0Sstevel@tonic-gate } else { 51*0Sstevel@tonic-gate return false; 52*0Sstevel@tonic-gate } 53*0Sstevel@tonic-gate } 54*0Sstevel@tonic-gate 55*0Sstevel@tonic-gate function checkColor(element) { 56*0Sstevel@tonic-gate var color = element.options[element.selectedIndex].text; 57*0Sstevel@tonic-gate if (color == "blonde") { 58*0Sstevel@tonic-gate if (confirm("Is it true that blondes have more fun?")) 59*0Sstevel@tonic-gate alert("Darn. That leaves me out."); 60*0Sstevel@tonic-gate } else 61*0Sstevel@tonic-gate alert(color + " is a fine choice!"); 62*0Sstevel@tonic-gate } 63*0Sstevel@tonic-gateEOF 64*0Sstevel@tonic-gate ; 65*0Sstevel@tonic-gate 66*0Sstevel@tonic-gate# here's where the execution begins 67*0Sstevel@tonic-gateprint header; 68*0Sstevel@tonic-gateprint start_html(-title=>'Personal Profile',-script=>$JSCRIPT); 69*0Sstevel@tonic-gate 70*0Sstevel@tonic-gateprint h1("Big Brother Wants to Know All About You"), 71*0Sstevel@tonic-gate strong("Note: "),"This page uses JavaScript and requires ", 72*0Sstevel@tonic-gate "Netscape 2.0 or higher to do anything special."; 73*0Sstevel@tonic-gate 74*0Sstevel@tonic-gate&print_prompt(); 75*0Sstevel@tonic-gateprint hr; 76*0Sstevel@tonic-gate&print_response() if param; 77*0Sstevel@tonic-gateprint end_html; 78*0Sstevel@tonic-gate 79*0Sstevel@tonic-gatesub print_prompt { 80*0Sstevel@tonic-gate print start_form(-name=>'form1', 81*0Sstevel@tonic-gate -onSubmit=>"return validateForm()"),"\n"; 82*0Sstevel@tonic-gate print "Birthdate (e.g. Jan 3, 1972): ", 83*0Sstevel@tonic-gate textfield(-name=>'birthdate', 84*0Sstevel@tonic-gate -onBlur=>"validateDate(this)"),"<p>\n"; 85*0Sstevel@tonic-gate print "Sex: ",radio_group(-name=>'gender', 86*0Sstevel@tonic-gate -value=>[qw/male female/], 87*0Sstevel@tonic-gate -onClick=>"doPraise(this)"),"<p>\n"; 88*0Sstevel@tonic-gate print "Hair color: ",popup_menu(-name=>'color', 89*0Sstevel@tonic-gate -value=>[qw/brunette blonde red gray/], 90*0Sstevel@tonic-gate -default=>'red', 91*0Sstevel@tonic-gate -onChange=>"checkColor(this)"),"<p>\n"; 92*0Sstevel@tonic-gate print hidden(-name=>'age',-value=>0); 93*0Sstevel@tonic-gate print submit(); 94*0Sstevel@tonic-gate print end_form; 95*0Sstevel@tonic-gate} 96*0Sstevel@tonic-gate 97*0Sstevel@tonic-gatesub print_response { 98*0Sstevel@tonic-gate import_names('Q'); 99*0Sstevel@tonic-gate print h2("Your profile"), 100*0Sstevel@tonic-gate "You claim to be a ",b($Q::age)," year old ",b($Q::color,$Q::gender),".", 101*0Sstevel@tonic-gate "You should be ashamed of yourself for lying so ", 102*0Sstevel@tonic-gate "blatantly to big brother!", 103*0Sstevel@tonic-gate hr; 104*0Sstevel@tonic-gate} 105*0Sstevel@tonic-gate 106