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