Dogcows Code - chaz/p5-CGI-Ex/blob - samples/validate_js_1_onsubmit.html

   1 <html>
   2 <style>
   3 .error {
   4   color: red;
   5   font-size: 75%;
   6 }
   7 </style>
   8
   9 <script src="../lib/CGI/Ex/validate.js"></script>
  10 <script>
  11 if (location.search) {
  12   document.writeln('<span style="color:green"><h1>Form Information submitted</h1></span>');
  13 }
  14 if (! document.validate) {
  15   document.writeln('<span style="color:red"><h1>Missing document.validate</h1>Path to ../lib/CGI/Ex/validate.js may be invalid.</span>');
  16 } else {
  17   document.writeln('<span style="color:green"><h1>Found document.validate</h1></span>');
  18 }
  19
  20 </script>
  21
  22
  23 <form name=a>
  24 <table>
  25 <tr>
  26   <td valign=top>Username:</td>
  27   <td>
  28     <table border=0 cellspacing=0 cellpadding=0><tr><td><input type=text size=20 name=username></td><td> Try hitting enter rather than tab.</td></tr></table>
  29     <span id=username_error class=error></span>
  30   </td>
  31 </tr>
  32 <tr>
  33   <td valign=top>Password:</td>
  34   <td>
  35     <input type=password size=20 name=password><br>
  36     <span id=password_error class=error></span>
  37   </td>
  38 </tr>
  39 <tr>
  40   <td valign=top>Verify Password:</td>
  41   <td>
  42     <input type=password size=20 name=password2><br>
  43     <span id=password2_error class=error></span>
  44   </td>
  45 </tr>
  46 <tr>
  47   <td valign=top>Email:</td>
  48   <td>
  49     <input type=text size=40 name=email><br>
  50     <span id=email_error class=error></span>
  51   </td>
  52 </tr>
  53 <tr>
  54   <td valign=top>Verify Email:</td>
  55   <td>
  56     <input type=text size=40 name=email2><br>
  57     <span id=email2_error class=error></span>
  58   </td>
  59 </tr>
  60 <tr>
  61   <td valign=top>State/Region:</td>
  62   <td>
  63     Specify State <input type=text size=2 name=state><br>
  64     OR Region <input type=text size=20 name=region>
  65     <span id=state_error class=error></span>
  66   </td>
  67 </tr>
  68 <tr>
  69   <td valign=top>Enum Check:</td>
  70   <td>
  71     <input type=text size=10 name=enum><br>
  72     <span id=enum_error class=error></span>
  73   </td>
  74 </tr>
  75 <tr>
  76   <td valign=top>Compare Check:</td>
  77   <td>
  78     <input type=text size=10 name=compare><br>
  79     <span id=compare_error class=error></span>
  80   </td>
  81 </tr>
  82 <tr>
  83   <td valign=top>Check one:</td>
  84   <td>
  85     <input type=checkbox name=checkone value=1> Foo<br>
  86     <input type=checkbox name=checkone value=2> Bar<br>
  87     <input type=checkbox name=checkone value=3> Baz<br>
  88     <span id=checkone_error class=error></span>
  89   </td>
  90 </tr>
  91 <tr>
  92   <td valign=top>Check two:</td>
  93   <td>
  94     <input type=checkbox name=checktwo value=1> Foo<br>
  95     <input type=checkbox name=checktwo value=2> Bar<br>
  96     <input type=checkbox name=checktwo value=3> Baz<br>
  97     <span id=checktwo_error class=error></span>
  98   </td>
  99 </tr>
 100 <tr><td colspan=2><hr></td></tr>
 101 <tr>
 102   <td valign=top>Fill In two:</td>
 103   <td>
 104     <span id=foo_error class=error></span><br>
 105     <input type=text name=foo value="" size=30> Foo<br>
 106     <input type=text name=bar value="" size=30> Bar<br>
 107     <input type=text name=baz value="" size=30> Baz<br>
 108   </td>
 109 </tr>
 110 <tr>
 111   <td colspan=2 align=right>
 112     <input type=submit value=Submit>
 113   </td>
 114 </tr>
 115 </table>
 116 </form>
 117
 118 <script src="../lib/CGI/Ex/yaml_load.js"></script>
 119 <script src="../lib/CGI/Ex/validate.js"></script>
 120 <script>
 121 document.validation = {
 122   "group no_confirm": 1,
 123   "group no_alert": 1,
 124   "group order": ["username", "password", "password2", "email", "email2", "state", "region", "s_r_combo", "enum", "compare", "checkone", "checktwo", "foo"],
 125   username: {
 126     name: "Username",
 127     required: 1,
 128     min_len: 3,
 129     max_len: 30
 130   },
 131   password: {
 132     name: "Password",
 133     required: 1,
 134     min_len: 6,
 135     max_len: 30,
 136     match: ["m/\\d/", "m/[a-z]/"],
 137     match_error: "$name must contain both a letter and a number."
 138   },
 139   password2: {
 140     name: "Verify password",
 141     equals: "password",
 142     equals_name: "password"
 143   },
 144   email: {
 145     name: "Email",
 146     required: 1,
 147     max_len: 100,
 148     type: 'email',
 149     type_error: "$name must be a valid email address."
 150   },
 151   email2: {
 152     name: "Verify email",
 153     equals: "email",
 154     equals_name: "email"
 155   },
 156   state: {
 157     validate_if: ["state", "! region"],
 158     match: "m/^\\w{2}$/",
 159     match_error: "Please type a two letter state code."
 160   },
 161   region: {
 162     validate_if: ["region", "! state"],
 163     delegate_error: "state",
 164     compare: "eq Manitoba",
 165     compare_error: "For this test - the region should be Manitoba."
 166   },
 167   s_r_combo: {
 168     field: "state",
 169     delegate_error:   "state",
 170     max_in_set:       "1 of state region",
 171     max_in_set_error: "Specify only one of state and region.",
 172     min_in_set:       "1 of state region",
 173     min_in_set_error: "Specify one of state and region."
 174   },
 175   'enum': {
 176     name: "Enum check",
 177     'enum': ["one", "two", "three", "four"],
 178     enum_error: "$name must be one of one, two, three, or four."
 179   },
 180   compare: {
 181     required: 1,
 182     required_error: "Please type a number",
 183     replace: "s/\\D//g",
 184     name: "Compare check",
 185     compare: ['> 99', '< 1000'],
 186     compare_error: '$name must be greater than 99 and less than 1000.'
 187   },
 188   checkone: {
 189     name: "Check one",
 190     required: 1,
 191     max_values: 1
 192   },
 193   checktwo: {
 194     name: "Check two",
 195     min_values: 2,
 196     max_values: 2
 197   },
 198   foo: {
 199     min_in_set: "2 of foo bar baz",
 200     max_in_set: "2 of foo bar baz"
 201   }
 202 };
 203 if (document.check_form) document.check_form('a');
 204 </script>
 205
 206 </html>
 207 <script>window.onload = function () { document.a.username.focus() }</script>