add PSGI handler

[chaz/p5-CGI-Ex] / samples / validate_js_2_onchange.html

diff --git a/samples/validate_js_2_onchange.html b/samples/validate_js_2_onchange.html
index 68b8fc1d1a67188764553541e45d54a4e09cd2aa..7d6e23a1bc6fb09b3b9af23fc5ffa3df6f586e02 100644 (file)
--- a/samples/validate_js_2_onchange.html
+++ b/samples/validate_js_2_onchange.html
@@ -115,16 +115,21 @@ if (! document.validate) {
 
 <script src="../lib/CGI/Ex/validate.js"></script>
 <script>
-document.validate_set_hook = function (key) {
-  document.getElementById(key+'_img').innerHTML = '<span style="font-weight:bold;color:red">!</span>';
-  document.getElementById(key+'_row').style.background = '#ffdddd';
+document.validate_set_hook = function (args) {
+  document.getElementById(args.key+'_img').innerHTML = '<span style="font-weight:bold;color:red">!</span>';
+  document.getElementById(args.key+'_row').style.background = '#ffdddd';
 };
-document.validate_clear_hook = function (key) {
-  document.getElementById(key+'_img').innerHTML = '<span style="font-weight:bold;color:green">+</span>';
-  document.getElementById(key+'_row').style.background = '#ddffdd';
+document.validate_clear_hook = function (args) {
+  if (args.was_valid) {
+   document.getElementById(args.key+'_img').innerHTML = '<span style="font-weight:bold;color:green">+</span>';
+   document.getElementById(args.key+'_row').style.background = '#ddffdd';
+  } else {
+   document.getElementById(args.key+'_img').innerHTML = '';
+   document.getElementById(args.key+'_row').style.background = '#fff';
+  }
 };
 document.validation = {
-  "group onevent": 'blur,change,submit',
+  "group onevent": 'change,blur,submit',
   "group no_confirm": 1,
   "group no_alert": 1,
   "group order": ["username", "password", "password2", "email", "email2", "state", "region", "s_r_combo", "enum", "compare", "checkone", "checktwo", "foo"],
@@ -140,9 +145,27 @@ document.validation = {
     min_len: 6,
     max_len: 30,
     match: ["m/\\d/", "m/[a-z]/"],
-    match_error: "$name must contain both a letter and a number."
+    match_error: "$name must contain both a letter and a number.",
+    custom_js: function (args) {
+      var v = args.value;
+      var n = 0;
+      if (v.match(/[a-z]/)) n++;
+      if (v.match(/[A-Z]/)) n++;
+      if (v.match(/[0-9]/)) n++;
+      var sym = v.match(/[ ~!@#$%^&*()_,.?{}\[\]]/) ? 1 : 0;
+      var s = (! v.length)   ? ''
+            : (v.length < 6) ? 'weak'
+            : (v.length < 7) ? (sym || n == 3)  ? 'ok' : 'weak'
+            : (v.length < 10) ? (n < 3 && ! sym) ? 'ok' : 'good'
+            : sym ? 'excellent' : 'good';
+      document.getElementById('password_strength').innerHTML = s;
+      if (s === 'weak') throw "Cannot use a weak password.  Try increasing the length or adding variation.";
+      return 1;
+    }
   },
   password2: {
+    validate_if: 'password was_valid',
+    vif_disable: 1,
     name: "Verify password",
     equals: "password",
     equals_name: "password"
@@ -155,6 +178,8 @@ document.validation = {
     type_error: "$name must be a valid email address."
   },
   email2: {
+    validate_if: 'email was_valid',
+    vif_disable: 1,
     name: "Verify email",
     equals: "email",
     equals_name: "email"
@@ -186,7 +211,8 @@ document.validation = {
   compare: {
     required: 1,
     required_error: "Please type a number",
-    replace: "s/\\D//g",
+    type: 'num',
+    type_error: 'Please type a valid number',
     name: "Compare check",
     compare: ['> 99', '< 1000'],
     compare_error: '$name must be greater than 99 and less than 1000.'
@@ -204,28 +230,12 @@ document.validation = {
   foo: {
     min_in_set: "2 of foo bar baz",
     max_in_set: "2 of foo bar baz"
-  },
-  pw_strength: { // separate from the pw validation
-    field: "password",
-    custom_js: function (args) {
-      var v = args.value;
-      var n = 0;
-      if (v.match(/[a-z]/)) n++;
-      if (v.match(/[A-Z]/)) n++;
-      if (v.match(/[0-9]/)) n++;
-      var sym = v.match(/[ ~!@#$%^&*()_,.?{}\[\]]/) ? 1 : 0;
-      var s = (! v.length)   ? ''
-            : (v.length < 3) ? 'weak'
-            : (v.length < 5) ? (sym || n == 3)  ? 'ok' : 'weak'
-            : (v.length < 9) ? (n < 3 && ! sym) ? 'ok' : 'good'
-            : sym ? 'excellent' : 'good';
-      document.getElementById('password_strength').innerHTML = s;
-      // we could return false to indicate the strength wasn't good enough
-      return 1;
-    }
   }
 };
 if (document.check_form) document.check_form('a');
+// do this in javascript to let the real form through without js
+document.a.password2.disabled = true;
+document.a.email2.disabled = true;
 </script>
 
 </html>