Formly - skrypt stylizowania i walidacji formularzy | DailyWeb.pl - codziennie o sieci

Formly - skrypt stylizowania i walidacji formularzy

Opublikowano 6 lat temu -


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ść.

Stylizacja formularza za pomocą skryptu Formly

Jak korzystać?

Należy przede wszystkim w nagłówku strony (w sekcji <head>) umieścić kod biblioteki jQuery, biblioteki formly i pliku ze stylami

<script type="text/javascript" src="http://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" />

Następnie można przygotowywać kod formularza, np.

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

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ć

<script>
 $(document).ready(function()
 { $('#MyForm').formly(); });
 </script>

Efekt?

Robi wrażenie prawda?

Pozostałe przykłady

Kilka przykładów z wykorzystaniem szablonów Formly. Kod formularza

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

Kod do wstawienia w sekcji <head>

<script>
 $(document).ready(function()
 {
 $('#ContactInfo').formly({'theme':'Dark'}, function(e)
 { $('.callback').html(e); });
 });
 </script>

Efekt?

Drugi przykład, bardziej rozbudowany

<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="http://" 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>

Kod do sekcji <head>

<script>
$(document).ready(function()
 {
 $(\'#ContactInfo\').formly({\'theme\':\'Dark\'}, function(e)
 { $(\'.callback\').html(e); });
 });
</script>

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

Demo Pobierz