[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

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));

    }

}

[cadavre]

Hmmmm... w końcu ktoś sporządził validator wprost JSowy. Ciekawe. A'propo frameworku Prototype - mógłbyś wytłumaczyć bo ja nie obeznany w temacie.

[ikioloak]

Koncepcja mi sie bardzo podoba. Robilem cos takiego 2 miesiace temu mniej wiecej, z prawie ze identycznym interfejsem (z tym ze troche bardziej rozbudowanym - ale zapewne tez rozbudujesz), i bez wykorzystania prototype, przez co kod byl ze 3-4x dluzszy :/ Parametry rowniez podawalem zgodnie z JSON jednak nie wpadlem na to zeby byly generowane w php. Zrealizowalem jedynie walidacje po stronie klienta.
Podsumowujac dobra robota! Jesli rozwiniesz, chetnie skorzystam, jesli nie, to sam rozwine

[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

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

Malutkie demo online: http://shaxbee.superhost.pl/demo/admin.html. Nie przestraszcie się wyglądem

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

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

[nospor]

PS2. Skrypt przestał działać IE ale to tylko sprawa czasu

a pod operą testowales?

JavaScript - http://shaxbee.superhost.pl/demo/admin.htm...&field2=asd
Inline script thread
Error:
name: TypeError
message: Statement on line 13: Type mismatch (usually a non-object value used where an object is required)
Backtrace:
Line 13 of linked script http://shaxbee.superhost.pl/demo/Common/JS...idator.class.js
this.attach(field);
Line 71 of linked script http://shaxbee.superhost.pl/demo/Common/JS/prototype.js
return __method.apply(object, args.concat($A(arguments)));
Line 299 of linked script http://shaxbee.superhost.pl/demo/Common/JS/prototype.js
iterator(value, index++);
Line 584 of linked script http://shaxbee.superhost.pl/demo/Common/JS/prototype.js
iterator(pair);
Line 303 of linked script http://shaxbee.superhost.pl/demo/Common/JS/prototype.js
this._each((function (value)
{
try
{
iterator(value, index++);
}
catch (e)
{
if (e != $continue)
throw e;
}
}
));
Line 16 of linked script http://shaxbee.superhost.pl/demo/Common/JS...idator.class.js
this.fields.each((function (field)
{
this.attach(field);
field.value.error = null;
}
).bind(this));
Line 23 of linked script http://shaxbee.superhost.pl/demo/Common/JS/prototype.js
this.initialize.apply(this, arguments);
Line 11 of inline#1 script in http://shaxbee.superhost.pl/demo/admin.htm...&field2=asd
validator = new Validator("testForm", {field1 : {errorMsg : "Nieprawidlowy kod pocztowy", validator : {name : "preg", params : {regexp : /^[0-9]{2}-[0-9]{3}$/}}}, field2 : {errorMsg : "Trinity said: You are NOT handy", validator : {name : "preg", params : {regexp : /^keymaker$/}}}});

i klops. Opera 9.02

[ShaXbee]

Tak jak pisałem, bind() zniesmacza Operę (post wyżej)...

Edit1: Po aktualizacji Prototype 1.5.0rc1 na 1.5.0 pod Operą działa, są problemy z animacją menu rozwijanego (eksplorator).
Edit2: Pod IE formularz już działa, są nadal problemy z menu ;]
Edit3: Działa już pod FF, Operą, IE6+, problemy z menu rozwijalnym (eksplorator) pod Operą.

Ten post edytował ShaXbee 23.01.2007, 12:50:49

[nospor]

a to przepraszam najmocniej, umknelo mi to w natloku informacji.

To co mi po klasie co pod opera nie dziala?
Poczekam na wersje dzialajace to wowczas poteszcze.

[ShaXbee]

Walidator już działa pod Operą 9 / IE6+ / FF1.5+.

Pokazane na stronie pokazywanie błędów odrazu po załadowaniu formularza jest opcjonalne, domyślnie błędy pojawiają się dopiero w momencie uzupełnienia pola

Proszę o przetestowanie w przeglądarkach mniej spotykanych np. Opera 8 / Safari etc