Sprawdzanie zaznaczenia pola "radio", validacja formularza Opcje

[Mion]

Mam problem z validacja formularza zawierającego pola opcjonalnego wyboru typ "radio". Do validacji formularza stosuje zamieszczony poniżej kod js który działa jak jest tylko jedno pole radio. Niestety jak dochodzi opcjonalnie - niestety przestaje działać tj.. Nie pojawia się alert i można wysłać z NIEzaznaczonym jednym z pól wyboru.... Proszę o pomoc ..

Kod

<script type="text/javascript">
function formCheck(form) {
if (form.pojazd.checked==false)
{alert("Jaki pojazd ?");return false;}
}
</script>

formularz:

Kod

<form method="post"  onsubmit="return formCheck(this)">
<input type="radio" name="pojazd" value="1"> Osobowy<br>
<input type="radio" name="pojazd" value="2"> Dostawczy<br>
<input type="submit" value="Submit">

Nikt się nie czuje na siłach w pomocy z tym problemem? (IMG:http://forum.php.pl/style_emoticons/default/sad.gif)

Ten post edytował Mion 7.01.2006, 13:49:08

[nospor]

nadaj dla kazdego z radio inne id, odwoluj sie do radio poprzez document.getElementById('idradio') i dla kazdego radio sprawdzaj cze jest zaznaczony. jesli zaden nie jest zaznaczony, to wtedy wywalaj alerta

[Mion]

A w kodzie jak by to wyglądało. Niestety nie mam doświadczenia w DOM (IMG:http://forum.php.pl/style_emoticons/default/sad.gif)

[nospor]

[HTML] pobierz, plaintext 
<form method="post"  onsubmit="return formCheck();">
<input type="radio" name="pojazd" value="1" id="p1"> Osobowy<br>
<input type="radio" name="pojazd" value="2" id="p2"> Dostawczy<br>
<input type="submit" value="Submit">
[HTML] pobierz, plaintext 

Kod

<script type="text/javascript">
function formCheck() {
if (document.getElementById('p1').checked==false && document.getElementById('p2').checked==false)
{alert("Jaki pojazd ?");return false;}
return true;
}
</script>

[Mion]

Wielkie dzwięki ! O to właśnie chodziło (IMG:http://forum.php.pl/style_emoticons/default/thumbsupsmileyanim.gif)

[piwib]

A jak byś to zrobił z polem tekstowym type=text (IMG:http://forum.php.pl/style_emoticons/default/questionmark.gif)

[Mion]

A jak byś to zrobił z polem tekstowym type=text (IMG:http://forum.php.pl/style_emoticons/default/questionmark.gif)

Tak jak podał Kolega nospor jest wyśmienicie, nie potrzebuję już innych kombinacji (IMG:http://forum.php.pl/style_emoticons/default/cool.gif)

[piwib]

Ale ja zadałem to pytanko a nie ty (IMG:http://forum.php.pl/style_emoticons/default/biggrin.gif) więc ja potrzebuje a nie ty (IMG:http://forum.php.pl/style_emoticons/default/biggrin.gif)

[revyag]

A jak byś to zrobił z polem tekstowym type=text (IMG:http://forum.php.pl/style_emoticons/default/questionmark.gif)

np. tak

Kod

function isNotEmpty(elem) {
    var str = document.getElementById(elem).value;
    if(str == null || str.length == 0) {
        return false;
    } else {
        return true;
    }
}

[piwib]

Mam to tak:

Kod

<form action="dalej.php" method="POST">
<input type=text name="elem" id="elem"/>
<br><br>
<input type=submit value="DALEJ"/>
</form>

<script type="text/javascript">
function isNotEmpty(elem) {
   var str = document.getElementById(elem).value;
   if(str == null || str.length == 0) {
       return false;
   } else {
       return true;
   }
}
</script>

I bez reakcji... Co źle lub czego brakuje?

[revyag]

Podałem Ci funkcję to sprawdzenia czy element jest pusty. Jej użycie nie polega na skopiowaniu jej treści gdzieś w kod i czekaniu aż "zadziała". Nie masz jej nigdzie wywoływanej. Możesz to robić przy submicie formularza:

[HTML] pobierz, plaintext 
<form action="dalej.php" method="POST" onsubmit="isNotEmpty('elem')">
<input type=text name="elem" id="elem"/>
<br><br>
<input type=submit value="DALEJ"/>
</form>
[HTML] pobierz, plaintext 

Formularz nie submitnie się jeśli pole będzie puste.

ps. używaj odpowiedniego bbcode, html do kodu html, code dla js.

[piwib]

[HTML] pobierz, plaintext 
<form action="dalej.php" method="POST" onsubmit="isNotEmpty('elem')">
<input type=text name="elem" id="elem"/>
<br><br>
<input type=submit value="DALEJ"/>
</form>
[HTML] pobierz, plaintext 

Kod

<script type="text/javascript">
function isNotEmpty(elem) {
  var str = document.getElementById(elem).value;
  if(str == null || str.length == 0) {
      return false;
  } else {
      return true;
  }
}
</script>

I dalej nie działa... Mistrzu?!

[revyag]

Mały szczegół (IMG:http://forum.php.pl/style_emoticons/default/snitch.gif)

[HTML] pobierz, plaintext 
<form action="dalej.php" method="POST" onsubmit="return isNotEmpty('elem')">
[HTML] pobierz, plaintext 

[piwib]

Teraz to tak :] I jeszcze jedno pytanko korzystajac z topica jak można połączyć te dwa elementy?

[HTML] pobierz, plaintext 
onsubmit="return formCheck();"
 
onsubmit="return isNotEmpty('nazwa_ankiety')"
[HTML] pobierz, plaintext 

[revyag]

Na szybko sklecone (IMG:http://forum.php.pl/style_emoticons/default/smile.gif)
W tablicy elems są elementy które walidujesz, pierwsze pole to id, drugie typ.
W pętli sprawdzanie czy pola wypełnione/zaznaczone - jak chcesz to sobie możesz coś tam dodać.
Zmienna result - na starcie pokazuje ile elementów ma tablica - wszystkie muszą być zaznaczone żeby formularz przeszedł.

Kod

<script type="text/javascript">
function formCheck() {
    
    var elems = new Array(
        new Array("elem1","text"),
        new Array("elem2","text"),
        new Array("elem3","checkbox"),
        new Array("elem4","checkbox")
    );
    
    var result=elems.length;
    
    for(var i=0; i<elems.length; i++) {
        switch(elems[i][1]) {
            case "text": {
                if(document.getElementById(elems[i][0]).value == null || document.getElementById(elems[i][0]).value.length == 0) {
                    result--;
                }
            }
            break;
            case "checkbox": {
                if(document.getElementById(elems[i][0]).checked==false) {
                    result--;
                }
            }
        }
    }
    
    return (result == elems.length) ? true : false;
}
</script>

[HTML] pobierz, plaintext 
<form action="" method="POST" onsubmit="return formCheck()">
<input id="elem1" type="text" name="elem1" />
<input id="elem2" type="text" name="elem2" />
<input id="elem3" type="checkbox" name="elem3" />
<input id="elem4" type="checkbox" name="elem4" />
<br /><br />
<input type="submit" value="DALEJ"/>
</form>
[HTML] pobierz, plaintext 

[piwib]

Ooo bosko thank you master (IMG:http://forum.php.pl/style_emoticons/default/smile.gif)

Chciałbym jeszcze dodać alert ale coś robie źle gdyż scrypt sie nie wykonuje. Jakbyś mógł jeszcze dopisac... (IMG:http://forum.php.pl/style_emoticons/default/smile.gif)

Ten post edytował piwib 9.02.2006, 18:16:39

[revyag]

Na końcu funkcji zamiast tego returna daj to:

Kod

if(result != elems.length) {
    alert("Musisz wypełnić wszystkie pola");
    return false;
} else {
    return true;
}

[piwib]

Mam coś takiego:

[HTML] pobierz, plaintext 
<form action="konfigurator_2.php" method="POST" onsubmit="return formCheck()">
 
Podaj nazwę ankiety:
<input type=text name="nazwa_ankiety" id="nazwa_ankiety"><br><br>
Wybierz ilość pytań ankiety:
<br><br>
  <input type=radio name=ilosc_pytan value="3" id="p1"/>3 pytania<br>
  <input type=radio name=ilosc_pytan value="5" id="p2"/>5 pytań<br>
  <input type=radio name=ilosc_pytan value="7" id="p3"/>7 pytań<br>
  <input type=radio name=ilosc_pytan value="10" id="p4"/>10 pytań<br><br>
  <input type=submit value="Dalej"/>
  </form>
[HTML] pobierz, plaintext 

Kod

<script type="text/javascript">
function formCheck() {
  
   var elems = new Array(
       new Array("nazwa_ankiety","text"),
       new Array("p1","radio"),
    new Array("p2","radio"),
    new Array("p3","radio"),
       new Array("p4","radio")
   );
  
   var result=elems.length;
  
   for(var i=0; i<elems.length; i++) {
       switch(elems[i][1]) {
           case "text": {
               if(document.getElementById(elems[i][0]).value == null || document.getElementById(elems[i][0]).value.length == 0) {
                   result--;
               }
           }
           break;
           case "radio": {
               if(document.getElementById(elems[i][0]).checked==false) {
                   result--;
               }
           }
       }
   }
  
   if(result != elems.length) {
   alert("Proszę wypełnić dokładnie wszystkie pola");
   return false;
} else {
   return true;
}}
</script>

I pewnie już wam sie rzuca w oczy że jest to formularz typu radio a skrypt jest nie do przejścia. Każda opcja typu radio zaznaczona być nie może a skrypt jest tak napisany... byłbym wdzięczny za odpowiedź

Ten post edytował piwib 10.02.2006, 16:21:26

[revyag]

Kod

<script type="text/javascript">
function formCheck() {
    
    var elems = new Array(
        new Array("elem1","text"),
        new Array("elem2","text"),
        new Array("elem3","checkbox"),
        new Array("elem4","checkbox"),
        new Array("elem5,elem6","radio")  //sztuczka:)
    );
    
    var result=elems.length;
    
    for(var i=0; i<elems.length; i++) {
        switch(elems[i][1]) {
            case "text": {
                if(document.getElementById(elems[i][0]).value == null || document.getElementById(elems[i][0]).value.length == 0) {
                    result--;
                }
            }
            break;
            case "checkbox": {
                if(document.getElementById(elems[i][0]).checked==false) {
                    result--;
                }
            }
            break;
            case "radio": {
                rad = elems[i][0].split(",",2);
                if((document.getElementById(rad[0]).checked || document.getElementById(rad[1]).checked) == false) {
                    result--;
                }
            }
            break;
        }
    }
    
    return (result == elems.length) ? true : false;
}
</script>

[piwib]

No bosko (IMG:http://forum.php.pl/style_emoticons/default/smile.gif) Jeszcze jedno pytanie i już nie męcze. Jak do tego dodać by wpisywana zmienna w polu typu text była liczbą i w dodatku większą od 0 ?