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=verify_password><br>
  43     <span id=verify_password_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", "verify_password", "email", "email2", "state", "region", "s_r_combo", "enum", "compare", "checkone", "checktwo", "foo"],
 125   username: {
 126     required: 1,
 127     min_len: 3,
 128     max_len: 30
 129   },
 130   password: {
 131     required: 1,
 132     min_len: 6,
 133     max_len: 30,
 134     match: ["m/\\d/", "m/[a-z]/"],
 135     match_error: "$name must contain both a letter and a number."
 136   },
 137   verify_password: {
 138     equals: "password",
 139     equals_name: "password"
 140   },
 141   email: {
 142     name: "Email",
 143     required: 1,
 144     max_len: 100,
 145     type: 'email',
 146     type_error: "$name must be a valid email address."
 147   },
 148   email2: {
 149     name: "Verify email",
 150     equals: "email",
 151     equals_name: "email"
 152   },
 153   state: {
 154     validate_if: ["state", "! region"],
 155     match: "m/^\\w{2}$/",
 156     match_error: "Please type a two letter state code."
 157   },
 158   region: {
 159     validate_if: ["region", "! state"],
 160     delegate_error: "state",
 161     compare: "eq Manitoba",
 162     compare_error: "For this test - the region should be Manitoba."
 163   },
 164   s_r_combo: {
 165     field: "state",
 166     delegate_error:   "state",
 167     max_in_set:       "1 of state region",
 168     max_in_set_error: "Specify only one of state and region.",
 169     min_in_set:       "1 of state region",
 170     min_in_set_error: "Specify one of state and region."
 171   },
 172   'enum': {
 173     name: "Enum check",
 174     'enum': ["one", "two", "three", "four"],
 175     enum_error: "$name must be one of one, two, three, or four."
 176   },
 177   compare: {
 178     required: 1,
 179     required_error: "Please type a number",
 180     replace: "s/\\D//g",
 181     name: "Compare check",
 182     compare: ['> 99', '< 1000'],
 183     compare_error: '$name must be greater than 99 and less than 1000.'
 184   },
 185   checkone: {
 186     name: "Check one",
 187     required: 1,
 188     max_values: 1
 189   },
 190   checktwo: {
 191     name: "Check two",
 192     min_values: 2,
 193     max_values: 2
 194   },
 195   foo: {
 196     min_in_set: "2 of foo bar baz",
 197     max_in_set: "2 of foo bar baz"
 198   }
 199 };
 200 if (document.check_form) document.check_form('a');
 201 </script>
 202
 203 </html>
 204 <script>window.onload = function () { document.a.username.focus() }</script>