[Bese-devel] reducing amount of javascript code for form validation

[Denys Rtveliashvili]

Hi,

UnCommon Web has a great and no doubt a useful feature: javascript-based
form validation. But I always was scared by an amount of javascript
generated for validation purposes. Today I tried to optimize that code
the results are pretty good: the javascript code shrunk with a factor
between 2 and 3. I believe it is possible to reduce it even more.

What I did:
* pulled as much javascript code from individual validators to the top
* pulled as much as possible from input field scripts to the
form-related script
* used dojo.byId instead of document.getElementById

What I did not yet:
* pulling common code into a separate static javascript file (I am not
sure how to do it in a proper manner, because the javascript should be
loaded only when there are UCW forms in the document)
* pulling out generic code like a check if a number is between two other
numbers (it would be laconic to write something like isNumberBetween
(field.value, 2, 10);)
* fixing bugs which were found in the process

The bugs which seems to exist in the original version:
* A change to a selected field does not revalidate the rest of the
fields. The bug can be seen in the example "Form demo": change the form
so that both "Password" and "String" are filled with the same text and
then remove the text in "String" -> both "String" and "Password" will
look like valid, while in fact the "Password" is invalid because it's
value is not the same as the value of "String".
* In the form-specific javascript the "form" variable is global.
Theoretically, this can lead to very bad consequences if there are more
than one form on a page.

===================================================================
As an example of the results I achieved today I attach old and new
versions of one of the input field validators.

OLD version:
------------
document.getElementById('_ucw_3').ucwValidate =
function () {
  if ((function () {
    var value = document.getElementById('_ucw_3').value;
    return !value
    || (!isNaN(value)
    || value.split('/').length == 2 && !isNaN(value.split('/')[0])
    && !isNaN(value.split('/')[1]) && 0 != value.split('/')[0]
    && 0 != value.split('/')[1]);
  })
  ()) {
    (function (element) {
      dojo.html.removeClass
      (document.getElementById('_ucw_3'), 'ucw-form-field-invalid');
      dojo.html.addClass
      (document.getElementById('_ucw_3'), 'ucw-form-field-valid');
    })
    (document.getElementById('_ucw_3'));
  } else {
    (function (element) {
      var element = document.getElementById('_ucw_3');
      if (!dojo.html.hasClass(element, 'ucw-form-field-invalid')) {
        dojo.html.removeClass(element, 'ucw-form-field-valid');
        dojo.html.addClass(element, 'ucw-form-field-invalid');
      };
    })
    (document.getElementById('_ucw_3'));
    return null;
  };
};
dojo.event.connect
(dojo.byId('_ucw_3'), 'onkeyup',
function (event) {
  document.getElementById('_ucw_3').ucwValidate();
});
document.getElementById('_ucw_3').ucwValidate();

NEW version:
------------
(function (f) {
  form.registerField
  (f,
  function () {
    var value = f.value;
    return (function () {
      return !value
      || (!isNaN(value)
      || value.split('/').length == 2
      && !isNaN(value.split('/')[0])
      && !isNaN(value.split('/')[1])
      && 0 != value.split('/')[0]
      && 0 != value.split('/')[1]);
    })
    ();
  });
  f.ucwValidate();
})
(dojo.byId('_ucw_3'));

===================================================================

I'd like to share the changes I did with anybody interested. The changes
will definitely need a review, because I am new to LISP and maybe I have
removed something I should not.

Probably I should create a patch and send it to somebody?

With best regards,
Denys R