Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript] Sprawdzenie czy wpisano dany tekst w input
Forum PHP.pl > Forum > Przedszkole
Kerth
6.09.2014, 10:29:08
Cześć,
męczę się ze sprawdzeniem w javascript czy wpisano dany tekst i kliknięto submit. Przykład:

Jeśli nie wpisano słów http:// to pojawia się komunikat. Jeśli wpisano to przepuszcza dalej.
W jaki sposób to zrobić? Jakiej funkcji użyć? Jakiś mały przykład? Pomóżcie.
trueblue
6.09.2014, 10:31:51
Podpinasz obsługę zdarzenia onSubmit w formularzu.
Pobierasz wartość pola, sprawdzasz (najlepiej wyrażeniem regularnym) poprawność pola.
Jeśli poprawne, to zwracasz true w funkcji, jeśli nie, zwracasz false.
Kerth
6.09.2014, 10:35:42
Mam podpięte pod onSubmit w formularzu. Błędy typu "nie wypełniłeś pola" pojawiają się prawidłowo. Problem jest właśnie ze sprawdzaniem. Tak samo jest z e-mail`em.

[PHP] pobierz, plaintext 
  1. var mail = "email";
  2. var wzorMaila = /^[0-9a-z_.-]+@[0-9a-z.-]+\.[a-z]{2,3}$/i
  3. if (f.email.value != wzorMaila)
  4. bledy += '* Podany e-mail zawiera niedozwolone znaki!\n';
[PHP] pobierz, plaintext


Czy ja to dobrze rozumiem? Co jest w tym kodzie nie tak, bo nie działa mi prawidłowo?

PS. To tylko przykład.
trueblue
6.09.2014, 10:38:42
http://www.w3schools.com/jsref/jsref_regexp_test.asp
Kerth
6.09.2014, 10:54:25
A jak powinno brzmieć wyrażenie regularne dla słów "http://" ?
SmokAnalog
6.09.2014, 10:56:10
Użyj jQuery:
[HTML] pobierz, plaintext 
  1. <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
[HTML] pobierz, plaintext


I zrób to np. tak:
[JAVASCRIPT] pobierz, plaintext 
  1. $("#formularz").submit(function () {
  2.     if ($("#pole").val().indexOf("http://") !== 0) {
  3.         $("#komunikat").text("Nieprawidłowy URL.");
  4.         return false;
  5.     }
  6. });
[JAVASCRIPT] pobierz, plaintext


Mój przykład będzie działał na HTML-u w tym stylu:
[HTML] pobierz, plaintext 
  1. <form id="formularz">
  2. 	<input type="text" id="pole">
  3. 	<div id="komunikat"></div>
  4. 	<input type="submit" value="OK">
  5. </form>
[HTML] pobierz, plaintext


Ten kod sprawdzi tylko czy wartość zaczyna się od http:// i wyświetli komunikat jeśli nie.
trueblue
6.09.2014, 10:57:00
Dla samych słów nie musisz stosować wyrażenia regularnego, ale porównać początek stringu z "http://".
Ale lepiej sprawdzić poprawność całej wartości:
/^(http|https|ftp)\:\/\/[a-z0-9\-\.]+\.[a-z]{2,3}(:[a-z0-9]*)?\/?([a-z0-9\-\._\?\,\'\/\\\+&amp;%\$#\=~])*$/i
Kerth
6.09.2014, 11:10:48
Cytat(SmokAnalog @ 6.09.2014, 11:56:10 ) *
Użyj jQuery:
[HTML] pobierz, plaintext 
  1. <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
[HTML] pobierz, plaintext


I zrób to np. tak:
[JAVASCRIPT] pobierz, plaintext 
  1. $("#formularz").submit(function () {
  2.     if ($("#pole").val().indexOf("http://") !== 0) {
  3.         $("#komunikat").text("Nieprawidłowy URL.");
  4.         return false;
  5.     }
  6. });
[JAVASCRIPT] pobierz, plaintext


Mój przykład będzie działał na HTML-u w tym stylu:
[HTML] pobierz, plaintext 
  1. <form id="formularz">
  2. 	<input type="text" id="pole">
  3. 	<div id="komunikat"></div>
  4. 	<input type="submit" value="OK">
  5. </form>
[HTML] pobierz, plaintext


Ten kod sprawdzi tylko czy wartość zaczyna się od http:// i wyświetli komunikat jeśli nie.


Coś chyba nie tak, bo kod nie zwraca nic gdy wpiszę i prześlę jakikolwiek wpis. Nic się nie dzieje oprócz dodania do linku znaku "?".

Zrobiłem sobie przykład poza projektem:

[PHP] pobierz, plaintext 
  1. <html>
  2. <head>
  3. 	<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
  4. </head>
  5. <body>
  6. <script>
  7. $("#formularz").submit(function () {
  8.     if ($("#pole").val().indexOf("http://") !== 0) {
  9.         $("#komunikat").text("Nieprawidłowy URL.");
  10.         return false;
  11.     }
  12. });
  13. </script>
  14.  
  15. <form id="formularz">
  16. 	<input type="text" id="pole">
  17. 	<div id="komunikat"></div>
  18. 	<input type="submit" value="OK">
  19. </form>
  20. </body>
[PHP] pobierz, plaintext


Dobrze to zinterpretowałem?
SmokAnalog
6.09.2014, 11:58:21
Daj oba znaczniki <script> zaraz przed zamknięciem </body>.
Kerth
6.09.2014, 12:01:05
Niestety nadal nic z tego:

[PHP] pobierz, plaintext 
  1. <html>
  2. <head>
  3. 	<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
  4. </head>
  5. <body>
  6.  
  7.  
  8. <form id="formularz">
  9. 	<input type="text" id="pole">
  10. 	<div id="komunikat"></div>
  11. 	<input type="submit" value="OK">
  12. </form>
  13.  
  14. <script>
  15. $("#formularz").submit(function () {
  16.     if ($("#pole").val().indexOf("http://") !== 0) {
  17.         $("#komunikat").text("Nieprawidłowy URL.");
  18.         return false;
  19.     }
  20. });
  21. </script>
  22. </body>
[PHP] pobierz, plaintext


Reakcja skryptu nadal taka sama.
SmokAnalog
6.09.2014, 12:40:41
Oba znaczniki, czyli ten z <head> też. Ale to nie ma wpływu na działanie. Sprawdziłem czy działa i działa.
Kerth
6.09.2014, 13:18:17
W takim razie co może być nie tak? Jakiś pomysł?
golabow
6.09.2014, 13:49:07
Sprawdź jakie masz komunikaty w konsoli. Zwykle w przeglądarkach konsole możesz uruchomić poprzez F12.
Kerth
6.09.2014, 15:11:50
W konsoli brak błędów. Dalej nie wiem o co chodzi.
trueblue
6.09.2014, 15:33:04
Spróbuj tak:
[HTML] pobierz, plaintext 
  1. $(document).ready(function(){
  2. //tu ten kod
  3. });
[HTML] pobierz, plaintext
Kerth
6.09.2014, 15:38:22 
[PHP] pobierz, plaintext 
  1. <html>
  2. <head>
  3. 	<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
  4.  
  5. </head>
  6. <body>
  7.  
  8.  
  9. <form id="formularz">
  10. 	<input type="text" id="pole">
  11. 	<div id="komunikat"></div>
  12. 	<input type="submit" value="OK">
  13. </form>
  14.  
  15. <script>
  16. $(document).ready(function(){
  17. $("#formularz").submit(function () {
  18.     if ($("#pole").val().indexOf("http://") !== 0) {
  19.         $("#komunikat").text("Nieprawidłowy URL.");
  20.         return false;
  21.     }
  22. }
  23. });
  24. </script>
  25. </body>
[PHP] pobierz, plaintext


Dalej bez rezultatów.
SmokAnalog
6.09.2014, 16:27:04
Document ready jest niepotrzebne, bo w momencie załadowania skryptu, potrzebne elementy są już gotowe. Po raz trzeci przypominam o przeniesieniu pierwszego <script> z <head> do <body>.

Jeśli Tobie to nie działa, to ja już nie wiem. Ostatni pomysł jaki mam, to spróbuj pobrać ten plik jQuery i odwołaj się do niego lokalnie.
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.