Blog webdeveloperski Patryk yarpo Jar

Formularze w dojo

Autor wiadomości Czerwiec 17, 2011

Dojo toolkit posiada bibliotekę komponentów (widgetów) o nazwie dijit. W tym wpisie postaram się pokazać, jak wykorzystać tę bibliotekę do łatwego stworzenia formularza z ciekawymi opcjami walidacyjnymi.

Na początek powinieneś

Prosty formularz HTML

Zacznijmy od prostego formularza HTML:

<html>
<head>
    <title>Formularz</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
</head>
<body>
    <form action="#">
        Imię i nazwisko: <input type="text" name="name" id="name"/><br />
        Data urodzenia: <input type="text" name="date" id="date"/><br />
        E-mail: <input type="text" name="email" id="email"/><br />
        WWWW : <input type="text" name="www" id="www"/><br />
        <input type="submit" value="gotowe" />
    </form>
</body>
</html>

demo online

Póki co ten formularz nie wykorzystuje w żaden sposób dojo.  Jego wygląd będzie się nieznacznie różnił w zależności od przeglądarki jaką posiadasz. Kontrolki formularza będą zachowywać się tak, jak domyślnie zachowują się one w Twojej przeglądarce.

dijit.form

Wykorzystajmy widgety dojo z biblioteki dijit do podmiany zwykłych elementów formularza:

<html>
<head>
    <title>Formularz</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js"
        djConfig="parseOnLoad: true"></script>
    <script type="text/javascript">
        dojo.require("dijit.form.Form");
        dojo.require("dijit.form.Button");
        dojo.require("dijit.form.ValidationTextBox");
        dojo.require("dijit.form.DateTextBox");
    </script>
    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css" />
</head>
<body class="claro">
    <form action="#">
        Imię i nazwisko: <input type="text" name="name" id="name"
            dojoType="dijit.form.ValidationTextBox" /><br />
        Data urodzenia: <input type="text" name="date" id="date"
            dojoType="dijit.form.DateTextBox" /><br />
        E-mail: <input type="text" name="email" id="email"
            dojoType="dijit.form.ValidationTextBox" /><br />
        WWWW : <input type="text" name="www" id="www"
            dojoType="dijit.form.ValidationTextBox" /><br />
        <input type="submit" dojoType="dijit.form.Button" label="Wyślij" />
    </form>
</body>
</html>

demo online

Taki kod daje nam już dużo ładniejszy formularz. Warto zwrócić uwagę na niestandardowy atrybut

djConfig="parseOnLoad: true"

przypisany do znacznika <script />. Dzięki niemu przy starcie automatycznie zostaną podmienione wszystkie zwykłe pola formularza na odpowiednie widgety. Można usunąć ten atrybut i obsłużyć wszystko ręcznie. Jednak na potrzeby tego wpisu to rozwiązanie jest IMO lepsze. Więcej nt. tego obiektu we wpisie o djConfig.

Walidacja danych

Każdy formularz powinien jednak posiadać walidację przekazanych danych. O ile walidacja danych po stronie serwera jest obowiązkowa, tyle po stronie klienta jest dobrym zwyczajem. I w tej kwestii dijit posiada bardzo przyjazne mechanizmy. Załóżmy, że pola `name', 'e-mail' są obowiązkowe. Należy zatem zmienić:

<input type="text" name="name" id="name"
    required="true"
    dojoType="dijit.form.ValidationTextBox" />

demo online

Nadal jednak w przypadku braku wypełnienia tych pól formularz zostanie wysłany (pola będą zaznaczone na niepoprawne, jeśli zaznaczymy je i odznaczymy bez wpisywania wartości).

Aby wymusić sprawdzanie wartości pól także podczas wysyłania danych na serwer wykorzystamy `dijit.form.Form' oraz jego zdarzenie `onSubmit' (nieprzypadkowo pisane inaczej niż `onsubmit').

<form dojoType="dijit.form.Form" action="#">
<script type="dojo/method" event="onSubmit">
    if (this.validate()){
       return confirm('Czy jesteś pewien, że chcesz wysłać dane?');
    }

    alert('Dane niepoprawne, proszę popraw i wyślij ponownie');
    return false;
</script>
... kod formularza ...
</form>

demo online

W tym wypadku wykorzystaliśmy metodę `validate' widgetu `diji.form.Form'. Na stronach dokumentacji dojo polecają używać zamiast znacznika <from /> znacznik <div />. Podobno ma to związek z IE. Z dumą zwalczam zatem IE i stosuję znacznik <form /> :).

Dodatkowo można napisać odpowiednią metodą widgetu walidującą wartość konkretnego pola:

Walidacja niestandardowa - wyrażenia regularne

Prócz walidacji polegającej na sprawdzeniu czy pole jest wymagane czy nie, można także wykorzystać odpowiedni atrybut `regExp' do wprowadzenia własnego wyrażenia regularnego sprawdzającego poprawność pola.

WWWW : <input type="text" name="www" id="www"
     dojoType="dijit.form.ValidationTextBox"
     regExp="http:\/\/.+" />

demo online

Takie wyrażenie sprawia, że pole będzie uznane za prawidłowe, tylko kiedy będzie się zaczynać od "http://" i będzie zawierać co najmniej jeden znak po tym ciągu.

Inne opcje

Widget  `dijit.form.ValidationTextBox' posiada także inne opcje:

  • promptMessage - podpowiedź pojawiająca się przed wypełnieniem pola
  • invalidMessage - podpowiedź pojawiająca się, kiedy pole jest nieprawidłowo wypełnione
  • constraints - ograniczenia [dokumentajca]
  • regExpGen - stosowane zamiast regExp [dokumentacja]
  • tooltipPosition - miejsce wyświetlania podpowiedzi [before, afret, above, below] [dokumentacja]
  • lowercase - po wypełnieniu pola zamień wszystkie litery na małe
  • uppercase - po wypelnieniu zamień wszystkie litery na wielkie
  • trim - usuń białe znaki z początku i końca wprowadzonego ciągu znaków
Imię i nazwisko: <input type="text" name="name" id="name"
    required="true"
    regExp=".{5,}"
    dojoType="dijit.form.ValidationTextBox"
    promptMessage="Podaj imię i nazwisko"
    invalidMessage="Podaj co najmniej 5 znaków"
    uppercase="true"
    trim="true" />

demo online

Oczywiście, to nie są wszystkie możliwości formularzy opartych o dijit. Więcej w dokumentacji (i/lub kolejnych wpisach).

Przykładowe zastosowanie formularza:

Warto przeczytać

Komentarze (0) Trackbacks (0)

Brak komentarzy.


Leave a comment

 

Brak trackbacków.