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

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