X-Git-Url: https://git.dogcows.com/gitweb?p=chaz%2Fp5-CGI-Ex;a=blobdiff_plain;f=samples%2Fvalidate_js_2_onchange.html;fp=samples%2Fvalidate_js_2_onchange.html;h=68b8fc1d1a67188764553541e45d54a4e09cd2aa;hp=0000000000000000000000000000000000000000;hb=490b94ab4051adf93abf16a4ed34efb923d6e8fc;hpb=ad1be93dffb2b25223fb93cbe2a7d349c6b5c127

diff --git a/samples/validate_js_2_onchange.html b/samples/validate_js_2_onchange.html
new file mode 100644
index 0000000..68b8fc1
--- /dev/null
+++ b/samples/validate_js_2_onchange.html
@@ -0,0 +1,232 @@
+<html>
+<style>
+.error {
+  color: red;
+  font-size: 75%;
+}
+</style>
+
+<script src="../lib/CGI/Ex/validate.js"></script>
+<script>
+if (location.search) {
+  document.writeln('<span style="color:green"><h1>Form Information submitted</h1></span>');
+}
+if (! document.validate) {
+  document.writeln('<span style="color:red"><h1>Missing document.validate</h1>Path to ../lib/CGI/Ex/validate.js may be invalid.</span>');
+} else {
+  document.writeln('<span style="color:green"><h1>Found document.validate</h1></span>');
+}
+
+</script>
+
+
+<form name=a>
+<table cellspacing=0 cellpadding=3>
+<tr id=username_row>
+  <td valign=top>Username:</td>
+  <td><input type=text size=30 name=username></td>
+  <td id=username_img></td>
+  <td id=username_error class=error></td>
+</tr>
+<tr id=password_row>
+  <td valign=top>Password:</td>
+  <td><input type=password size=30 name=password><span id=password_strength style="font-size:smaller;color:blue"></span></td>
+  <td id=password_img></td>
+  <td id=password_error class=error></td>
+</tr>
+<tr id=password2_row>
+  <td valign=top>Verify Password:</td>
+  <td><input type=password size=30 name=password2></td>
+  <td id=password2_img></td>
+  <td id=password2_error class=error></td>
+</tr>
+<tr id=email_row>
+  <td valign=top>Email:</td>
+  <td><input type=text size=40 name=email></td>
+  <td id=email_img></td>
+  <td id=email_error class=error></td>
+  </td>
+</tr>
+<tr id=email2_row>
+  <td valign=top>Verify Email:</td>
+  <td><input type=text size=40 name=email2></td>
+  <td id=email2_img></td>
+  <td id=email2_error class=error></td>
+</tr>
+<tr id=state_row>
+  <td valign=top>State/Region:</td>
+  <td>
+    Specify State <input type=text size=2 name=state><br>
+    OR Region <input type=text size=20 name=region>
+  </td>
+  <td id=state_img></td>
+  <td id=state_error class=error></td>
+</tr>
+<tr id=enum_row>
+  <td valign=top>Enum Check:</td>
+  <td><input type=text size=10 name=enum></td>
+  <td id=enum_img></td>
+  <td id=enum_error class=error></td>
+</tr>
+<tr id=compare_row>
+  <td valign=top>Compare Check:</td>
+  <td><input type=text size=10 name=compare></td>
+  <td id=compare_img></td>
+  <td id=compare_error class=error></td>
+</tr>
+<tr id=checkone_row>
+  <td valign=top>Check one:</td>
+  <td>
+    <input type=checkbox name=checkone value=1> Foo<br>
+    <input type=checkbox name=checkone value=2> Bar<br>
+    <input type=checkbox name=checkone value=3> Baz<br>
+  </td>
+  <td id=checkone_img></td>
+  <td id=checkone_error class=error></td>
+</tr>
+<tr id=checktwo_row>
+  <td valign=top>Check two:</td>
+  <td>
+    <input type=checkbox name=checktwo value=1> Foo<br>
+    <input type=checkbox name=checktwo value=2> Bar<br>
+    <input type=checkbox name=checktwo value=3> Baz<br>
+  </td>
+  <td id=checktwo_img></td>
+  <td id=checktwo_error class=error></td>
+</tr>
+<tr><td colspan=2><hr></td></tr>
+<tr id=foo_row>
+  <td valign=top>Fill In two:</td>
+  <td>
+    <input type=text name=foo value="" size=30> Foo<br>
+    <input type=text name=bar value="" size=30> Bar<br>
+    <input type=text name=baz value="" size=30> Baz<br>
+  </td>
+  <td id=foo_img></td>
+  <td id=foo_error class=error></td>
+</tr>
+<tr>
+  <td colspan=2 align=right>
+    <input type=submit value=Submit>
+  </td>
+</tr>
+</table>
+</form>
+
+<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_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.validation = {
+  "group onevent": 'blur,change,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"],
+  username: {
+    name: "Username",
+    required: 1,
+    min_len: 3,
+    max_len: 30
+  },
+  password: {
+    name: "Password",
+    required: 1,
+    min_len: 6,
+    max_len: 30,
+    match: ["m/\\d/", "m/[a-z]/"],
+    match_error: "$name must contain both a letter and a number."
+  },
+  password2: {
+    name: "Verify password",
+    equals: "password",
+    equals_name: "password"
+  },
+  email: {
+    name: "Email",
+    required: 1,
+    max_len: 100,
+    type: 'email',
+    type_error: "$name must be a valid email address."
+  },
+  email2: {
+    name: "Verify email",
+    equals: "email",
+    equals_name: "email"
+  },
+  state: {
+    validate_if: ["state", "! region"],
+    match: "m/^\\w{2}$/",
+    match_error: "Please type a two letter state code."
+  },
+  region: {
+    validate_if: ["region", "! state"],
+    delegate_error: "state",
+    compare: "eq Manitoba",
+    compare_error: "For this test - the region should be Manitoba."
+  },
+  s_r_combo: {
+    field: "state",
+    delegate_error:   "state",
+    max_in_set:       "1 of state region",
+    max_in_set_error: "Specify only one of state and region.",
+    min_in_set:       "1 of state region",
+    min_in_set_error: "Specify one of state and region."
+  },
+  'enum': {
+    name: "Enum check",
+    'enum': ["one", "two", "three", "four"],
+    enum_error: "$name must be one of one, two, three, or four."
+  },
+  compare: {
+    required: 1,
+    required_error: "Please type a number",
+    replace: "s/\\D//g",
+    name: "Compare check",
+    compare: ['> 99', '< 1000'],
+    compare_error: '$name must be greater than 99 and less than 1000.'
+  },
+  checkone: {
+    name: "Check one",
+    required: 1,
+    max_values: 1
+  },
+  checktwo: {
+    name: "Check two",
+    min_values: 2,
+    max_values: 2
+  },
+  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');
+</script>
+
+</html>
+<script>window.onload = function () { document.a.username.focus() }</script>

Username:
Password:
Verify Password:
Email:
Verify Email:
State/Region:	+ Specify State + OR Region +
Enum Check:
Compare Check:
Check one:	+ Foo + Bar + Baz +
Check two:	+ Foo + Bar + Baz +

Fill In two:	+ Foo + Bar + Baz +
+ +