Dogcows Code - chaz/p5-CGI-Ex/blob - samples/validate_js_2_onchange.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 cellspacing=0 cellpadding=3>
  25 <tr id=username_row>
  26   <td valign=top>Username:</td>
  27   <td><input type=text size=30 name=username></td>
  28   <td id=username_img></td>
  29   <td id=username_error class=error></td>
  30 </tr>
  31 <tr id=password_row>
  32   <td valign=top>Password:</td>
  33   <td><input type=password size=30 name=password><span id=password_strength style="font-size:smaller;color:blue"></span></td>
  34   <td id=password_img></td>
  35   <td id=password_error class=error></td>
  36 </tr>
  37 <tr id=password2_row>
  38   <td valign=top>Verify Password:</td>
  39   <td><input type=password size=30 name=password2></td>
  40   <td id=password2_img></td>
  41   <td id=password2_error class=error></td>
  42 </tr>
  43 <tr id=email_row>
  44   <td valign=top>Email:</td>
  45   <td><input type=text size=40 name=email></td>
  46   <td id=email_img></td>
  47   <td id=email_error class=error></td>
  48   </td>
  49 </tr>
  50 <tr id=email2_row>
  51   <td valign=top>Verify Email:</td>
  52   <td><input type=text size=40 name=email2></td>
  53   <td id=email2_img></td>
  54   <td id=email2_error class=error></td>
  55 </tr>
  56 <tr id=state_row>
  57   <td valign=top>State/Region:</td>
  58   <td>
  59     Specify State <input type=text size=2 name=state><br>
  60     OR Region <input type=text size=20 name=region>
  61   </td>
  62   <td id=state_img></td>
  63   <td id=state_error class=error></td>
  64 </tr>
  65 <tr id=enum_row>
  66   <td valign=top>Enum Check:</td>
  67   <td><input type=text size=10 name=enum></td>
  68   <td id=enum_img></td>
  69   <td id=enum_error class=error></td>
  70 </tr>
  71 <tr id=compare_row>
  72   <td valign=top>Compare Check:</td>
  73   <td><input type=text size=10 name=compare></td>
  74   <td id=compare_img></td>
  75   <td id=compare_error class=error></td>
  76 </tr>
  77 <tr id=checkone_row>
  78   <td valign=top>Check one:</td>
  79   <td>
  80     <input type=checkbox name=checkone value=1> Foo<br>
  81     <input type=checkbox name=checkone value=2> Bar<br>
  82     <input type=checkbox name=checkone value=3> Baz<br>
  83   </td>
  84   <td id=checkone_img></td>
  85   <td id=checkone_error class=error></td>
  86 </tr>
  87 <tr id=checktwo_row>
  88   <td valign=top>Check two:</td>
  89   <td>
  90     <input type=checkbox name=checktwo value=1> Foo<br>
  91     <input type=checkbox name=checktwo value=2> Bar<br>
  92     <input type=checkbox name=checktwo value=3> Baz<br>
  93   </td>
  94   <td id=checktwo_img></td>
  95   <td id=checktwo_error class=error></td>
  96 </tr>
  97 <tr><td colspan=2><hr></td></tr>
  98 <tr id=foo_row>
  99   <td valign=top>Fill In two:</td>
 100   <td>
 101     <input type=text name=foo value="" size=30> Foo<br>
 102     <input type=text name=bar value="" size=30> Bar<br>
 103     <input type=text name=baz value="" size=30> Baz<br>
 104   </td>
 105   <td id=foo_img></td>
 106   <td id=foo_error class=error></td>
 107 </tr>
 108 <tr>
 109   <td colspan=2 align=right>
 110     <input type=submit value=Submit>
 111   </td>
 112 </tr>
 113 </table>
 114 </form>
 115
 116 <script src="../lib/CGI/Ex/validate.js"></script>
 117 <script>
 118 document.validate_set_hook = function (args) {
 119   document.getElementById(args.key+'_img').innerHTML = '<span style="font-weight:bold;color:red">!</span>';
 120   document.getElementById(args.key+'_row').style.background = '#ffdddd';
 121 };
 122 document.validate_clear_hook = function (args) {
 123   if (args.was_valid) {
 124    document.getElementById(args.key+'_img').innerHTML = '<span style="font-weight:bold;color:green">+</span>';
 125    document.getElementById(args.key+'_row').style.background = '#ddffdd';
 126   } else {
 127    document.getElementById(args.key+'_img').innerHTML = '';
 128    document.getElementById(args.key+'_row').style.background = '#fff';
 129   }
 130 };
 131 document.validation = {
 132   "group onevent": 'change,blur,submit',
 133   "group no_confirm": 1,
 134   "group no_alert": 1,
 135   "group order": ["username", "password", "password2", "email", "email2", "state", "region", "s_r_combo", "enum", "compare", "checkone", "checktwo", "foo"],
 136   username: {
 137     name: "Username",
 138     required: 1,
 139     min_len: 3,
 140     max_len: 30
 141   },
 142   password: {
 143     name: "Password",
 144     required: 1,
 145     min_len: 6,
 146     max_len: 30,
 147     match: ["m/\\d/", "m/[a-z]/"],
 148     match_error: "$name must contain both a letter and a number."
 149   },
 150   password2: {
 151     validate_if: 'password was_valid',
 152     vif_disable: 1,
 153     name: "Verify password",
 154     equals: "password",
 155     equals_name: "password"
 156   },
 157   email: {
 158     name: "Email",
 159     required: 1,
 160     max_len: 100,
 161     type: 'email',
 162     type_error: "$name must be a valid email address."
 163   },
 164   email2: {
 165     validate_if: 'email was_valid',
 166     vif_disable: 1,
 167     name: "Verify email",
 168     equals: "email",
 169     equals_name: "email"
 170   },
 171   state: {
 172     validate_if: ["state", "! region"],
 173     match: "m/^\\w{2}$/",
 174     match_error: "Please type a two letter state code."
 175   },
 176   region: {
 177     validate_if: ["region", "! state"],
 178     delegate_error: "state",
 179     compare: "eq Manitoba",
 180     compare_error: "For this test - the region should be Manitoba."
 181   },
 182   s_r_combo: {
 183     field: "state",
 184     delegate_error:   "state",
 185     max_in_set:       "1 of state region",
 186     max_in_set_error: "Specify only one of state and region.",
 187     min_in_set:       "1 of state region",
 188     min_in_set_error: "Specify one of state and region."
 189   },
 190   'enum': {
 191     name: "Enum check",
 192     'enum': ["one", "two", "three", "four"],
 193     enum_error: "$name must be one of one, two, three, or four."
 194   },
 195   compare: {
 196     required: 1,
 197     required_error: "Please type a number",
 198     replace: "s/\\D//g",
 199     name: "Compare check",
 200     compare: ['> 99', '< 1000'],
 201     compare_error: '$name must be greater than 99 and less than 1000.'
 202   },
 203   checkone: {
 204     name: "Check one",
 205     required: 1,
 206     max_values: 1
 207   },
 208   checktwo: {
 209     name: "Check two",
 210     min_values: 2,
 211     max_values: 2
 212   },
 213   foo: {
 214     min_in_set: "2 of foo bar baz",
 215     max_in_set: "2 of foo bar baz"
 216   },
 217   pw_strength: { // separate from the pw validation
 218     field: "password",
 219     custom_js: function (args) {
 220       var v = args.value;
 221       var n = 0;
 222       if (v.match(/[a-z]/)) n++;
 223       if (v.match(/[A-Z]/)) n++;
 224       if (v.match(/[0-9]/)) n++;
 225       var sym = v.match(/[ ~!@#$%^&*()_,.?{}\[\]]/) ? 1 : 0;
 226       var s = (! v.length)   ? ''
 227             : (v.length < 3) ? 'weak'
 228             : (v.length < 5) ? (sym || n == 3)  ? 'ok' : 'weak'
 229             : (v.length < 9) ? (n < 3 && ! sym) ? 'ok' : 'good'
 230             : sym ? 'excellent' : 'good';
 231       document.getElementById('password_strength').innerHTML = s;
 232       // we could return false to indicate the strength wasn't good enough
 233       return 1;
 234     }
 235   }
 236 };
 237 if (document.check_form) document.check_form('a');
 238 // do this in javascript to let the real form through without js
 239 document.a.password2.disabled = true;
 240 document.a.email2.disabled = true;
 241 </script>
 242
 243 </html>
 244 <script>window.onload = function () { document.a.username.focus() }</script>