Formly – skrypt stylizowania i walidacji formularzy
Tworząc drobne skrypty, które wymagają logowania użytkownik bądź jego rejestracji zawsze jest masa roboty by obsłużyć wszystkie błędy. A to gdy użytkownik poda zły format poczty email, a to w przypadku gdy jego login jest zbyt długi etc. Dziś chce wam przedstawić narzędzie przygotowane w jQuery, który sprawę walidacji załatwi za nas. Oprócz sprawdzenia pól także nada charakter naszemu formularzowi.
Formly, bo taką nazwe nosi biblioteka (17kb!) została przygotowana przez serwis thrivingkings.com a ja przygotowałem wam spolszczoną wersję.
Demo
Demo skryptu Formly znajdziecie tutaj
Co potrafi skrypt?
Na początek co potrafi skrypt? Biblioteka waliduje nasze formularze bez przeładowania strony. Użytkownik nie będzie w stanie zapisać formularza jeżeli nie umieści w formularzy wybranych przez nas treści. Formly dodatkowo pozwala wybrać szablon naszego formularza – zwiększając potężnie jego atrakcyjność.
Jak korzystać?
Należy przede wszystkim w nagłówku strony (w sekcji <head>) umieścić kod biblioteki jQuery, biblioteki formly i pliku ze stylami
[html]<script type="text/javascript" src="https://code.jquery.com/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/formly.js"></script>
<link rel="stylesheet" href="css/formly.css" type="text/css" />[/html]
Następnie można przygotowywać kod formularza, np.
[html]<form id="MyForm" width="400px"></pre>
Imię: <input type="text" name="Imie" /><br>
Adres email: <input type="text" name="Email" validate="email" /><br>
Login: <input type="text" name="Login" place="Bez spacji" label="Login" require="true" /><br>
Hasło: <input type="password" name="Haslo" label="Haslo" require="true" /><br>
<input type="submit" value="Zapisz" /><input type="reset" value="Wyczyść" />
</form> [/html]
Czyli nasz formularz będzie na chwile obecną wyglądał tak:
Wystarczy dodać teraz wywołanie skryptu w sekcji <head> strony. Mój formularz nazywa się MyForm i taką samą wartość należy umieścić w kodzie poniżej, w trzeciej linijce, by biblioteka wiedziała do jakiego elementu ma się odwołać
[js]<script>
$(document).ready(function()
{ $(’#MyForm’).formly(); });
</script>[/js]
Efekt?
Robi wrażenie prawda?
Pozostałe przykłady
Kilka przykładów z wykorzystaniem szablonów Formly. Kod formularza
[html]<form id="BetaSignup" width="200px" title="Zapisz się" subtitle="do betatestów">
<input type="text" name="Imie" place="Twoje imię" /><br>
<input type="text" name="Email" validate="email" place="Adres email" /><br>
<input type="text" name="Login" place="Wybierz nazwe użytkownika" require="true" label="Login" pre-fix="@" /><br>
<input type="password" name="Haslo" require="true" label="Haslo" place="Hasło" /><br>
<input type="password" name="PasswordMatch" match="Password" label="Password" place="Podaj ponownie hasło" /><br>
<input type="submit" value="Dodaj" /><input type="reset" value="Wyczyść" />
</form>[/html]
Kod do wstawienia w sekcji <head>
[js]<script>
$(document).ready(function()
{
$(’#ContactInfo’).formly({’theme’:’Dark’}, function(e)
{ $(’.callback’).html(e); });
});
</script>[/js]
Efekt?
Drugi przykład, bardziej rozbudowany
[html]<form id="ContactInfo" width="600px" title="Zarejestruj się">
<input type="text" name="first_name" place="Imię" size="30" />
<input type="text" name="last_name" place="Nazwisko" size="30" style="margin-left:10px;" />
<input type="text" name="email" validate="email" place="Adres email" size="30" />
<input type="text" name="website" place="Adres strony" size="30" pre-fix="https://" validate="http" style="margin-left:10px;" />
<select id="gender">
<option value="male">Mężczyzna</option>
<option value="female">Kobieta</option>
</select>
<input type="radio" name="membership" value="new" style="margin-left:10px;" /> Nowy user
<input type="radio" name="membership" value="existing" /> Istniejący user
<input type="password" name="pword" require="true" label="Password" place="Hasło" />
<input type="password" name="pwordm" match="pword" label="Password" place="Powtórz hasło" />
<input type="checkbox" name="agree" require="true" label="Terms" value="agree" /> Akceptuje regulamin
<input type="submit" value="Zapisz" /><input type="reset" value="Wyczyść" /> </form>[/html]
Kod do sekcji <head>
[js]<script>
$(document).ready(function()
{
$(\’#ContactInfo\’).formly({\’theme\’:\’Dark\’}, function(e)
{ $(\’.callback\’).html(e); });
});
</script>[/js]
Efekt?
Pomoc
Poniżej lista komend z która spotkacie się przeglądając kod przykładów
label : (string) nazwa pola
place : (string) podpowiedź w samym polu
pre-fix : (string) wstawianie w domyśle wybranego znaku
require : (true or false) wymagalność pola
match : (string) pole musi być takie samo jak wskazane inne (np. pole powtórz hasło)
validate : (string) ’email’ lub 'http’ – walidacja konkretnego typu pól
