[Klasa JS] Walidator Opcje

[ShaXbee]

Klasa wymaga frameworku Prototype.

Na potrzeby projektu próbuję stworzyć tandem walidatorów - jeden po stronie serwera w php, drugi po stronie klienta w JS 'podpinany' o ile to tylko możliwe.

Deklaracja pól do walidacji i sposobu ich sprawdzania ma się znajdować jedynie po stronie serwera, do klienta wysyłana jako doklejony kod JSON.

Klasa będzie oczywiście rozwijana, to co w tej chwili prezentuję można potraktować jako pre-alpha (IMG:http://forum.php.pl/style_emoticons/default/smile.gif)

Sposób użycia w kodzie HTML:

[HTML] pobierz, plaintext 
<ul id="MyFormErrors">
</ul>
 
<form id="MyForm">
 <input name="field1" />
 <input name="field2" />
</form>
 
<script language="javascript">
new Validator('MyForm', 'MyFormErrors', {
 field1: {
  errorMsg: 'Podaj prawidłową wartość liczbową (10-100)',
  validator:
   name: 'checkInt',
   params: {
    min: 10,
    max: 60
   }
  }
 },
 field2: {
  errorMsg: 'Podaj prawidlowy kod pocztowy',
  validator: {
   name: 'preg',
   params: {
    regexp: /^[0-9]{2}-[0-9]{3}$/
   }
  }
 }
});
</script>
[HTML] pobierz, plaintext 

Kod klasy Validator:

Kod

Validator = Class.create();

Validator.prototype = {

    initialize: function(form, errors, fields) {

        this.form = $(form);
        this.errors = $(errors);

        this.fields = fields;

        $H(fields).each(function(field) {

            this.attach(field.key);
            field.value.error = null;

        }.bind(this));

    },

    attach: function(name, event) {

        node = this.form.firstChild;
        while(node) {

            if(node.name == name)
                Event.observe(node, 'change', this.validate.bind(this), true);

            node = node.nextSibling;

        }

    },

    validate: function(e) {

        obj = Event.element(e);
        field = this.fields[obj.name];

        if(!this[field.validator.name](obj.value, field.validator.params)) {

            if(field.error == null) {

                obj.addClassName('error');

                li = document.createElement('li');
                li.appendChild(document.createTextNode(field.errorMsg));

                this.errors.appendChild(li);

                field.error = li;

            }

        } else if(field.error != null) {

            obj.removeClassName('error');

            field.error.parentNode.removeChild(field.error);
            field.error = null;

        }

        return true;

    },

    preg: function(field, data) {

        return (field.match(data.regexp) != null);

    },

    checkInt: function(field, data) {

        return (!isNaN(parseInt(field)) && (data.min != undefined || field >= data.min) && (data.max != undefined || field <= data.max));

    },

    checkFloat: function(field, data) {

        return (!isNaN(parseInt(field)) && (data.min != undefined || field >= data.min) && (data.max != undefined || field <= data.max));

    }

}

[ShaXbee]

Obecnie rzeźbię dalej klasę i po drodze trafiłem na zaledwie trzy problemy od strony Prototype i Scriptaculous:

• Scriptaculous pozwala na uruchamianie więcej niż jednego efektu na elemencie w tym samym czasie - trzeba się przed tym samodzielnie zabezpieczyć w innym wypadku dzieją się cuda w stylu element z efektem w 3/4, źle spozycjonowanym itp.
• Funkcja bind() za CHRL nie chce działać pod Operą
• Nie potrafię podpiąć się do eventu afterFinish dla Effect w Scriptacoluosie, obecnie podmieniam metode finish - pomoglo (IMG:http://forum.php.pl/style_emoticons/default/winksmiley.jpg)

Rewelacyjnie ułatwia pracę Prototype - chociażby wspomniana funkcja bind() która wyeliminowała problemy z dostępem do obiektu w procedurze obsługi zdarzeń (onclick, onchange etc.)

Event.observe umożliwia eleganckie i przenośne rejestrowanie procedur obsługi zdarzeń. Przy okazji 'wymusza' rejestrowanie obslugi zdarzen poza tagami html co dodatkowo oczyszcza kod.

Event.stop, Event.element - kolejne dwie bardzo ułatwiające życie funkcje - pierwsza zatrzymuje event, uniemożliwiając np. wysłanie formularza i działa pod każdą przeglądarką; Event.element zwraca element dla którego został wywołany element, już nie ma potrzeby robienia różnych wersji procedury obsługi zdarzeń zależnie od przeglądarki (IMG:http://forum.php.pl/style_emoticons/default/smile.gif)

Malutkie demo online: http://shaxbee.superhost.pl/demo/admin.html. Nie przestraszcie się wyglądem (IMG:http://forum.php.pl/style_emoticons/default/smile.gif)

PS. Znacie może jakiś sensowny debugger JS do IE5.5 i wyższych?
PS2. Skrypt przestał działać IE ale to tylko sprawa czasu (IMG:http://forum.php.pl/style_emoticons/default/smile.gif)

Ten post edytował ShaXbee 23.01.2007, 11:13:18