view release on metacpan or  search on metacpan

samples/validate_js_2_onchange.html  view on Meta::CPAN

<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><hr></td></tr>
<tr id=cplx_row>
  <td valign=top>Complete:</td>
  <td>
    <input type=text name=cplx value="" size=8>
    <input type=text name=cplx_a value="" size=8>
    <input type=text name=cplx_b value="" size=8>
  </td>
  <td id=cplx_img></td>
  <td id=cplx_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 (args) {
  if (!document.getElementById(args.key+'_img')) alert('cannot set '+args.key);
  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 (args) {
  if (!document.getElementById(args.key+'_img')) alert('cannot clear '+args.key);
  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": '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"],
  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.",
    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"
  },
  email: {
    name: "Email",
    required: 1,
    max_len: 100,
    type: 'email',
    type_error: "$name must be a valid email address."
  },
  email2: {
    validate_if: 'email was_valid',
    vif_disable: 1,
    name: "Verify email",
    equals: "email",