Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: dodatkowy atrybut pola input
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
Aquarius
witam,
napisałem sobie kilka linijek które mają sprawdzać w Javascripcie czy pole input zostało wypełnione/wybrane lub zaznaczone, poniżej wersja wygenerowanego HTML, ale oczywiście wszystko działa na zmiennych PHP, musiałem gdzieś popełnić błąd przy modyfikacji bo początkowo skrypt działał, jest on bardziej rozbudowany o poszczególne obiekty z pól input, ale zasada jest taka sama

nagle przestał działać i stąd moja prośba o analizę i wskazanie błędu

  1. <script type="text/javascript">
  2. function validateForm()
  3. {
  4. var Imiewymagane=document.getElementById("Imie").getAttribute("Imiewymagane");
  5. var imie=document.forms["signup"]["Imie"].value;
  6. var lang=document.forms["signup"]["lang"].value;
  7. if (Imiewymagane=="tak") {
  8. if (imie==null || imie=="")
  9. {
  10. if (lang=="pol") {
  11. alert("Nie podałeś swojego imienia");
  12. }
  13. if (lang=="eng") {
  14. alert("You have to fill your name");
  15. }
  16. }
  17. }
  18. }
  19. </script>


  1. <form action="" name="signup" id="signup" method="POST" onsubmit="return validateForm();">
  2. <tr>
  3. <td>
  4. <input type="text" id="Imie" name="Imie" Imiewymagane="tak" value="">
  5. </td>
  6. </tr>
  7. <tr>
  8. <td>
  9. <input type="hidden" id="lang" name="lang" value="pol">
  10. </td>
  11. </tr>
  12. <tr>
  13. <td>
  14. <input type="submit" value="Wyślij">
  15. </td>
  16. </tr>
  17. </table>
  18. </form>
trueblue
U mnie sklejony kod z tych fragmentów działa.
Jaki u Ciebie jest objaw niedziałania?
Aquarius
  1. <script type="text/javascript">
  2. function validateForm()
  3. {
  4. var Imiewymagane=document.getElementById("Imie").getAttribute("Imiewymagane");
  5. var Nazwiskowymagane=document.getElementById("Nazwisko").getAttribute("Nazwiskowymagane");
  6. var imie=document.forms["signup"]["Imie"].value;
  7. var lang=document.forms["signup"]["lang"].value;
  8. if (Imiewymagane=="tak") {
  9. if (imie==null || imie=="")
  10. {
  11. if (lang=="pol") {
  12. alert("Nie podałeś swojego imienia");
  13. }
  14. if (lang=="eng") {
  15. alert("You have to fill your name");
  16. }
  17. }
  18. }
  19. }
  20. </script>


dla pewności okroiłem go maksymalnie, sprawdziłem i rzeczywiście zadziałał, natomiast jeżeli dodam kolejny obiekt np. Nazwisko - skrypt przestaje działać
trueblue
Twój kod JS +
  1. <tr>
  2. <td>
  3. <input type="text" id="Nazwisko" name="Nazwisko" Nazwiskowymagane="tak" value="">
  4. </td>
  5. </tr>

nadal działa.
Aquarius
no tak, po dodaniu odpowiedniego pola input, jednak formularz tworzy się dynamicznie, nie wszystkie pola podane w Javascripcie jako obiekty będą zawsze występowały w formularzu
gdy więc zdefiniuję:
  1. var Nazwiskowymagane=document.getElementById("Nazwisko").getAttribute("Nazwiskowymagane");

ale takiego pola nie będzie w formularzu - skrypt nie zadziała
trueblue
Nie możesz więc tak zrobić, bo przy pierwszym wywołaniu validateForm tego elementu nie ma, a co za tym idzie skrypt zatrzymuje się na linii 5.
Pobieranie atrybutów musisz otoczyć deklaracją try/catch.
Potem w zależności czy dana zmienna jest zdefiniowana czy nie, wykonujesz blok odpowiedzialny za walidację.
Aquarius
aha, ok, rozumiem,
wybacz, w Javascript nie pisałem nic swojego, rozumiem zasadę, trochę brak mi doświadczenia ze składnią, czy byłbyś w stanie na tym konkretnym przykładzie podać rozwiązanie?
w PHP można ale nie trzeba podawać alternatywę dla if'a jeżeli jakaś zmienna nie jest zdefiniowana, a tutaj niestety jest to wymagane (długa droga przede mną w Javascripcie, a nawet dobrze nie zacząłem smile.gif )
trueblue
  1. try{
  2. var imiewymagane=pobierz atrybut
  3. }
  4. catch(error){};
  5.  
  6. if(imiewymagane!==undefined){
  7. blok walidacji tego pola
  8. }

albo
  1. if(document.getElementById("Imie")){
  2. var atrybut=document.getElementById("Imie").getAttribute("Imiewymagane");
  3. i tu caly blok walidacji tego pola
  4. }
  5. //powyzsza sekcja dla kazdego elementu z osobna
Damonsson
Proponuję używać
[JAVASCRIPT] pobierz, plaintext
  1. data-nazwiskowymagane
[JAVASCRIPT] pobierz, plaintext

[JAVASCRIPT] pobierz, plaintext
  1. data-imiewymagane
[JAVASCRIPT] pobierz, plaintext


np:
  1. <input type="text" id="Nazwisko" name="Nazwisko" data-nazwiskowymagane="tak" value="">
Aquarius
dzięki piękne, zadziałało tak jak powinno smile.gif
staram się nie pytać o gotowca tylko sam dojść do rozwiązania, ale niekiedy po prostu trzeba

@Damonsson, czy to jakaś bardzo istotna różnica?
Damonsson
Nie istnieje taki atrybut jak np "nazwiskowymagane", do takich spraw powinno się właśnie używać atrybutu data-*.

Różnica w działaniu żadna. Tylko walidator nie rzuci błędem i będzie stricte poprawny kod HTML.

Tak dodałem do tematu, bo uważam, że warto o tym wspomnieć.

trueblue
Cytat(Aquarius @ 18.03.2014, 20:58:11 ) *
dzięki piękne, zadziałało tak jak powinno smile.gif
staram się nie pytać o gotowca tylko sam dojść do rozwiązania, ale niekiedy po prostu trzeba

I bardzo dobrze, bo najlepiej się uczyć samemu.

Atrybuty data- stosuj jeśli masz zadeklarowany doctype html5.
Oczywiście jeśli zastosujesz, te które masz w kodzie nie zwaliduje Ci się kod nawet przy html transitional.
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.