dodatkowy atrybut pola input Opcje

[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

[XML] pobierz, plaintext 
<script type="text/javascript">
        function validateForm()
        {
            var Imiewymagane=document.getElementById("Imie").getAttribute("Imiewymagane");
            var imie=document.forms["signup"]["Imie"].value;
            var lang=document.forms["signup"]["lang"].value;
            if (Imiewymagane=="tak") {
                if (imie==null || imie=="")
                {
                    if (lang=="pol") {
                        alert("Nie podałeś swojego imienia");
                    }
                    if (lang=="eng") {
                        alert("You have to fill your name");
                    }
                }
            }
        }
    </script>
[XML] pobierz, plaintext 

[HTML] pobierz, plaintext 
<form action="" name="signup" id="signup" method="POST" onsubmit="return validateForm();">
        <table>
            <tr>
                <td>
                    <input type="text" id="Imie" name="Imie" Imiewymagane="tak" value="">
                </td>
            </tr>
            <tr>
                <td>
                    <input type="hidden" id="lang" name="lang" value="pol">
                </td>
            </tr>
            <tr>
                <td>
                    <input type="submit" value="Wyślij">
                </td>
            </tr>
        </table>
    </form>
[HTML] pobierz, plaintext 

Ten post edytował Aquarius 18.03.2014, 18:31:39

[trueblue]

U mnie sklejony kod z tych fragmentów działa.
Jaki u Ciebie jest objaw niedziałania?

[Aquarius]

[XML] pobierz, plaintext 
<script type="text/javascript">
        function validateForm()
        {
            var Imiewymagane=document.getElementById("Imie").getAttribute("Imiewymagane");
            var Nazwiskowymagane=document.getElementById("Nazwisko").getAttribute("Nazwiskowymagane");
            var imie=document.forms["signup"]["Imie"].value;
            var lang=document.forms["signup"]["lang"].value;
            if (Imiewymagane=="tak") {
                if (imie==null || imie=="")
                {
                    if (lang=="pol") {
                        alert("Nie podałeś swojego imienia");
                    }
                    if (lang=="eng") {
                        alert("You have to fill your name");
                    }
                }
            }
        }
    </script>
[XML] pobierz, plaintext 

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 +

[HTML] pobierz, plaintext 
<tr>
                <td>
                    <input type="text" id="Nazwisko" name="Nazwisko" Nazwiskowymagane="tak" value="">
                </td>
            </tr>		
[HTML] pobierz, plaintext 

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

[XML] pobierz, plaintext 
var Nazwiskowymagane=document.getElementById("Nazwisko").getAttribute("Nazwiskowymagane");
[XML] pobierz, plaintext 

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 )

Ten post edytował Aquarius 18.03.2014, 20:27:05

[trueblue]

[HTML] pobierz, plaintext 
try{
 var imiewymagane=pobierz atrybut
}
catch(error){};
 
if(imiewymagane!==undefined){
  blok walidacji tego pola
}
[HTML] pobierz, plaintext 

albo

[HTML] pobierz, plaintext 
if(document.getElementById("Imie")){
 var atrybut=document.getElementById("Imie").getAttribute("Imiewymagane");
 i tu caly blok walidacji tego pola
}
//powyzsza sekcja dla kazdego elementu z osobna
[HTML] pobierz, plaintext 

Ten post edytował trueblue 18.03.2014, 20:40:53

[Damonsson]

Proponuję używać

[JAVASCRIPT] pobierz, plaintext 
data-nazwiskowymagane
[JAVASCRIPT] pobierz, plaintext 

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

np:

[HTML] pobierz, plaintext 
<input type="text" id="Nazwisko" name="Nazwisko" data-nazwiskowymagane="tak" value="">
[HTML] pobierz, plaintext 

Ten post edytował Damonsson 18.03.2014, 20:45:20

[Aquarius]

dzięki piękne, zadziałało tak jak powinno
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]

dzięki piękne, zadziałało tak jak powinno
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.