Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript][CSS][PHP]Jak zmienić miejsce wyświetlania błędów ?
Forum PHP.pl > Forum > Przedszkole
Maker5
27.01.2013, 19:20:23
Witam.
Używam bootstrap od twittera.
Bardzo przyjemny framework.
Ale mam pewien problem.
Jak zrobić aby błędy w trakcie wypełniania formularza nie były pokazywane bezpośrednio pod polem
ale gdzieś indziej ?
Bo jak pokazuje się przy polu to mi się formularz rozjeżdża.

przykład
http://alittlecode.com/files/jQuery-Validate-Demo/

proszę wpisać złego emaila i zobaczycie o co mi chodzi.
błąd pokazuje się pod polem a ja chcę go przesunąć gdzieś w prawo np.
Michasko
27.01.2013, 19:44:18
Poprawić style:
label.error,
label.success itd.

oraz
.control-group.error input
.control-group.success input itd.

wszystkim dopisz
[CSS] pobierz, plaintext 
  1. float: left;
[CSS] pobierz, plaintext
Maker5
27.01.2013, 20:12:31
Cytat(Michasko @ 27.01.2013, 19:44:18 ) *
Poprawić style:
label.error,
label.success itd.

oraz
.control-group.error input
.control-group.success input itd.

wszystkim dopisz
[CSS] pobierz, plaintext 
  1. float: left;
[CSS] pobierz, plaintext


nie do końca o to mi chodzi.
jak mam float do lewej to komunikaty i tak są poniżej pol a mi chodzi o to aby te komunikaty w ogóle gdzieś indziej przesunać poza diva w którym są
zrobić im jakieś jedno miesce z divem gdzie będą się wyświetlać.
kristaps
27.01.2013, 20:17:59
Nie wiem jak to działa w tym frameworku, ale na dobrą sprawę możesz wyświetlić komunikat, w którym divie chcesz.

[PHP] pobierz, plaintext 
  1. <?php 
  2. echo '<script type="text/javascript">alert("error!");</script>'; 
  3. ?>
[PHP] pobierz, plaintext
Maker5
27.01.2013, 20:21:50
Cytat(kristaps @ 27.01.2013, 20:17:59 ) *
Nie wiem jak to działa w tym frameworku, ale na dobrą sprawę możesz wyświetlić komunikat, w którym divie chcesz.

[PHP] pobierz, plaintext 
  1. <?php 
  2. echo '<script type="text/javascript">alert("error!");</script>'; 
  3. ?>
[PHP] pobierz, plaintext


nie działa.
jeśli chcesz sprawdzić o co mi chodzi to wejdz na ta strone
http://alittlecode.com/files/jQuery-Validate-Demo/

i podaj zly email i zobaczysz komunikat pod polem i to wlasnie chcialbym wywalic i umiescic gdzies indziej
Michasko
28.01.2013, 14:48:33
To, co Ci powiedziałem, przesunie komunikat na prawo od pola (tak jak napisałeś w pierwszym poście - "gdzieś w prawo np.") -> SCREEN
Jeśli chcesz umieszczać sobie je gdzieś indziej, to wejdź tutaj:
http://docs.jquery.com/Plugins/Validation/validate
i poszukaj o opcji 'errorPlacement'. Jak zauważysz, na zmiennej 'error' jest tam używana metoda 'insertAfter' - zamień ją na coś innego, co umieści ten błąd np. w wybranym przez Ciebie DIV-ie:
[JAVASCRIPT] pobierz, plaintext 
  1. $('#ID_diva').append(error);
[JAVASCRIPT] pobierz, plaintext
Maker5
30.01.2013, 00:23:55
Cytat(Michasko @ 28.01.2013, 14:48:33 ) *
To, co Ci powiedziałem, przesunie komunikat na prawo od pola (tak jak napisałeś w pierwszym poście - "gdzieś w prawo np.") -> SCREEN
Jeśli chcesz umieszczać sobie je gdzieś indziej, to wejdź tutaj:
http://docs.jquery.com/Plugins/Validation/validate
i poszukaj o opcji 'errorPlacement'. Jak zauważysz, na zmiennej 'error' jest tam używana metoda 'insertAfter' - zamień ją na coś innego, co umieści ten błąd np. w wybranym przez Ciebie DIV-ie:
[JAVASCRIPT] pobierz, plaintext 
  1. $('#ID_diva').append(error);
[JAVASCRIPT] pobierz, plaintext


powyższy kod nie działa sad.gif
[edit] ale poniższy tak smile.gif

UWAGA UWAGA exclamation.gif

PANIE I PANOWIE ZNALAZŁEM ROZWIĄZANIE KTÓRE MOŻE POSŁUŻYĆ KAŻDEMU.

męczyłem się 3 dni ale warto było bo w końcu się udało.

Oto rozwiązanie JAK PRZENIEŚĆ BŁĘDY JavaScript DO WYBRANEGO PRZEZ SIEBIE DIVA GDZIEKOLWIEK NA STRONĘ.
Coś podobnego na wzór errorPlacement ale to na 100% działa, a errorPlacement nie zawsze.

Po 1.
W pliku php w kórym mamy formularz przerabiamy swój kod formularza na wzór tego czy inaczej mówiąc przekształcamy swój formularz podobnie do tego:

[PHP] pobierz, plaintext 
  1. <form action="" id="formField">
  2. <label for="user">Nazwa użytkownika</label> 
  3. <input type="text" minlength="3" maxlength="35" style="width:100px;" id="user" name="user" /></form>
[PHP] pobierz, plaintext


Po 2.
Tworzymy nowy plik JavaScript lub w istniejącym już pliku JavaScript który oczywiście musi być podpięty do wyżej używanego pliku php zwykłym kodem (pomiędzy sekcjami <head> a </head>) typu:

[HTML] pobierz, plaintext 
  1.     <script type="text/javascript" src="aplikacja/formularz/skrypty/js/script.js"></script>
[HTML] pobierz, plaintext


(ścieżkę oczywiście proszę zmienić według swojej lokalizacji pliku)

umieszczamy taki magiczny kod:

[JAVASCRIPT] pobierz, plaintext 
  1. function initValidate()
  2. {
  3.     $("#formField").validate({
  4. 		errorLabelContainer: "div#labelErrors",
  5.         messages: {
  6.             fullName: {
  7. 	        minlength: 2,
  8.                 required: "Proszę wpisać nazwę użytkownika.",
  9.                 minlength: jQuery.format("Nazwa użytkownika musi zawierać minimum {0} znaki.")
  10.             },
  11.  
  12. 		}});
[JAVASCRIPT] pobierz, plaintext


całą rolę odgrywa tutaj funkcja errorLabelContainer: "div#labelErrors", która odpowiada za przenoszenie errorów do wskazanego diva.
Ja swój div w którym chcę umieszczać błędy nazwałem labelErrors.

Po 3.
Musimy określić style czyli gdzie i jak mają się pokazywać nasze errory z formularza.
W pliku PHP z punktu powyżej <head> 1 dodajemy linijkę ze ścieżką do pliku style np.

<link href="aplikacja/formularz/style.css" rel="stylesheet">

[CSS] pobierz, plaintext 
  1. #labelErrors {
  2.         color: #920A39;
  3. 	float: right;
  4. 	font-family: Helvetica,Arial,sans-serif;
  5. 	font-size: 11px;
  6. 	height: 22px;
  7. 	margin-right: 21px;
  8. 	margin-top: -46px;
  9. 	overflow: hidden;
  10. 	position: relative;
  11. 	text-align: right;
  12. 	width: 380px;
  13. 	padding-top: 4px;
  14. 	padding-right: 8px;
  15. 	padding-bottom: 4px;
  16. 	padding-left: 4px;
  17. }
[CSS] pobierz, plaintext


co do tego kodu to oczywiście kolory, fonty, padding czy marginesy mozna zmienić według uznania. co do pozostałych wartości to takie zalecam ze względu na
to że próbowałem bardzo wielu kombinacji i ta okazała się strzałem w 10. Np. jeśli byłoby kilka błędów to na stronie w tym divie w którym mają się one pokazywać zobaczymy jeden bład
a pozostałe są w tle niewidoczne. Jak uzytkownik poprawi blednie wypelnione pole to wskoczy automatycznie kolejny błąd jeśli taki jest. Więc jest czysto i spójnie smile.gif

Po 4.
W pliku PHP z punktu 1 w którym mamy formularz (już przerobiony) dodajemy div id w takim miejscu gdzie chcemy aby błędy się pokazywały.
W moim przypadku to

[HTML] pobierz, plaintext 
  1. <div id="labelErrors"> </div> 
[HTML] pobierz, plaintext


Po 5.
Otworzyć ulubiony napój i delektować się świętym spokojem, że błędy pokażą się tam gdzie chcemy a nie albo pod polem input albo obok niego.

Dziękuję, że mogłem dołożyć swój wkład dla społeczności PHP.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.