Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [JavaScript][CSS][PHP]Jak zmienić miejsce wyświetlania błędów ?, Bootstrap od twittera
Maker5
post
Post #1





Grupa: Zarejestrowani
Postów: 139
Pomógł: 0
Dołączył: 2.04.2008

Ostrzeżenie: (0%)
-----

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.
Go to the top of the page
+Quote Post
Michasko
post
Post #2





Grupa: Zarejestrowani
Postów: 283
Pomógł: 31
Dołączył: 10.01.2006
Skąd: Działoszyn

Ostrzeżenie: (0%)
-----

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


Ten post edytował Michasko 27.01.2013, 19:48:38


--------------------
Po prawie 3-letniej przerwie w programowaniu, znowu raczkuję :)
Go to the top of the page
+Quote Post
Maker5
post
Post #3





Grupa: Zarejestrowani
Postów: 139
Pomógł: 0
Dołączył: 2.04.2008

Ostrzeżenie: (0%)
-----

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ć.
Go to the top of the page
+Quote Post
kristaps
post
Post #4





Grupa: Zarejestrowani
Postów: 279
Pomógł: 36
Dołączył: 1.03.2012

Ostrzeżenie: (0%)
-----

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
Go to the top of the page
+Quote Post
Maker5
post
Post #5





Grupa: Zarejestrowani
Postów: 139
Pomógł: 0
Dołączył: 2.04.2008

Ostrzeżenie: (0%)
-----

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
Go to the top of the page
+Quote Post
Michasko
post
Post #6





Grupa: Zarejestrowani
Postów: 283
Pomógł: 31
Dołączył: 10.01.2006
Skąd: Działoszyn

Ostrzeżenie: (0%)
-----

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


Ten post edytował Michasko 28.01.2013, 14:49:20


--------------------
Po prawie 3-letniej przerwie w programowaniu, znowu raczkuję :)
Go to the top of the page
+Quote Post
Maker5
post
Post #7





Grupa: Zarejestrowani
Postów: 139
Pomógł: 0
Dołączył: 2.04.2008

Ostrzeżenie: (0%)
-----

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.

Ten post edytował Maker5 30.01.2013, 00:26:32
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 22.08.2025 - 07:07
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn