Validacija forme, ukoliko je sve OK, ispis izabranih opcija pomocu alert-a, potrebna pomoc

[ bantes9 @ 07.02.2012. 23:31 ] @

Imam problem sa zavrsnim korakom (ispis cekiranih opcija u formi pomocu alert-a ako je sve OK uneto) u jednom zadatku a sve u sklopu pripreme za ispit.

Html stranica je sledeca:

[IMG=http://img31.imageshack.us/img31/3806/screenshot001sj.jpg][/IMG]

Provere uslova rade i izbacuju trazene greske (korisnicko ime mora imati vise od 6 karaktera, lozinka vise od 8, jedan radio button i (bar) jedan checkbox moraju biti selektovani, FCE kurs se moze odrzavati samo pondedeljkom, sredom i petkom....).
Problem nastaje kada nakon ispravno unetih podatka, treba da se pojavi u alert box-u text "Uspesno ste se prijavili na OZN kurs za grupu DAN", gde je OZN-oznaka kursa a DAN-dan u nedelji.

Javascript code je sledeci:

Code:

  <script>
  function provera(){

  var uzorakIme=/\w{6,}/; //provera da li korisnicko ime ima vise od 6 karaktera
  var uzorakLozinka=/\w{8,}/; // provera da li lozinka ima vise od 8 karaktera

  ime= document.skola.ime.value;
  lozinka=document.skola.lozinka.value;

  if (uzorakIme.test(ime) == false) {
  alert ("Greška!!! Korisničko ime nema minimalno 6 karaktera");
  return 0;
  }
  if (uzorakLozinka.test(lozinka) == false) {
  alert ("Greška!!! Lozinka nema minimalno 8 karaktera");
  return 0;
  }
var dan = document.skola.dan.value;

if (document.skola.kurs[0].checked != true && document.skola.kurs[1].checked != true && document.skola.kurs[2].checked != true &&

document.skola.kurs[0].checked != true && document.skola.godina[0].checked != true && document.skola.godina[1].checked != true &&

document.skola.godina[2].checked != true) {

  alert ("Greška!!! Nije odabran kurs ili godina učenja!");
  }
  else if(!(dan == "1" || dan == "3" || dan == "5") && document.skola.kurs[0].checked == true){
  alert ("Greška!!! Kurs FCE koji je odabran ne možete slušati tog dana!"); /*kurs FCE moze samo ponedeljak-sreda-petak*/
  }
  else if(!(dan == "2" || dan == "4") && (document.skola.kurs[1].checked == true || document.skola.kurs[2].checked == true)){
   alert ("Greška!!! Kurs CAE ili CPE koji je odabran ne možete slušati tog dana!"); /*kursevi CAE i CPE mogu utorak-cetvrtak*/
  }
  else if (!(dan == "6" || dan == "7") && document.skola.kurs[3].checked == ture){
  alert ("Greška!!! Kurs TOEFL koji je odabran ne možete slušati tog dana"); /*kurs TOEFL moze samo vikendom (subota-nedelja) */
  }
   else {
   alert ("Sada je sve u redu");
   /* pokusao sam da bar dobijem poruku "sve je u redu" a onda da ispostujem ostale detalje
   ali u slucaju ispravno unetih podataka nista se ne desava */
   }
  }

  </script>

Html i css fajl su u prilogu. Hvala unapred na svakoj vrsti pomoci.

[ joseph.magnum @ 10.02.2012. 18:18 ] @

Code:

else if (!(dan == "6" || dan == "7") && document.skola.kurs[3].checked == ture){
alert ("Greška!!! Kurs TOEFL koji je odabran ne možete slušati tog dana"); /*kurs TOEFL moze samo vikendom (subota-nedelja) */
}

Pogledaj pred kraj uslova da imas ture umesto true.
Promeni to, trebalo bi da radi (na brzinu sam istestirao i izgleda ok).

Isto ima par nepotrebnih stvari:

Code:

        if(document.skola.kurs[0].checked != true
        && document.skola.kurs[1].checked != true
        && document.skola.kurs[2].checked != true
        && document.skola.kurs[0].checked != true // ovo je vec provereno 3 reda ranije - ne utice na rezultat uslova, ali je nepotrebno :)
        && document.skola.godina[0].checked != true
        && document.skola.godina[1].checked != true
        && document.skola.godina[2].checked != true) {
            // ako nista nije cekirano
            alert ("Greška!!! Nije odabran kurs ili godina ucenja!");
        }

Sve u svemu, resio si 99% zadatka, samo te typ-o malo zbunio. Srecno na ispitu! :)

[ bantes9 @ 11.02.2012. 10:20 ] @

Hvala na ukazanom propustu, ubio sam se da resim zadatak, ali u brzini nisam primetio najociglednije :)

Sto se tice reda

Code:
&& document.skola.kurs[0].checked != true // ovo je vec provereno 3 reda ranije - ne utice na rezultat uslova, ali je nepotrebno :)

i tu se potkrala greska koju sam u medjuvremenu ispravio.

Obzirom da ima 4 kursa ispravno je

Code:
document.skola.kurs[3].checked

Hvala jos jednom puno na pomoci. pozdrav.

[ Aleksandar Ružičić @ 11.02.2012. 15:56 ] @

Ubuduce koristi JSLint on moze lako da ti pokaze te propuste kao sto su typos (i plus da ti kaze da li ti kod "valja" ili ne)..

[ joseph.magnum @ 11.02.2012. 17:14 ] @

@bantes9 - nema na cemu

Samo da se nadovezem na Aleksandrov post - ako koristis Notepad++ kao code editor, imas JSLint plugin (http://jslintnpp.sourceforge.net/)

[ bantes9 @ 12.02.2012. 20:49 ] @

@jeseph.magnum Da koristim Notepad++ jer me to ceka na ispitu pa sam hteo da simuliram "realnu situaciju" :)

Instalirao sam plugin, testirao na predjasnju gresku, sve radi, tako da cu ubuduce znati da je moje neznanje u pitanju :)

@Aleksandar Ruzic

Iz prethodno postavljene js teme sam poslusao savet i u Chrome-u pogledao opciju koju si mi naveo, ali se nisam bas najbolje snasao, ali u svaku slucaju nema veza pomenuti plugin resava stvar.

Hvala jos jednom puno na pomoci i olaksavanju ovih prvih koraka u js-u.

[ bantes9 @ 13.02.2012. 00:03 ] @

Izvinjavam se jos jednom, pokusao sam da resim i poslednji deo zadatka tj. da mi nakon uspesne validacije izadje alertbox u kojem ce pisati "Uspesno ste se prijavili na OZN kursa za grupu DAN" gde je OZN oznaka kursa a DAN izabrani dan (ispis u poslednjem alert box-u gde pise sada je sve u redu).

Pokusao sam vise nacina i imao sam razlicite rezultate (gledao sam i JSlint log ali nisam naisao na nista sumnivo).

Jedna od funkcija za "izvlacenje" naziva kursa (document.skola.kurs.value):

function potvrdaKurs() {
var i
var potvrkurs
for (i = 0; i < document.skola.kurs.lentgh; i++) {
if (document.skola.kurs.checked == true){
potvrkurs = document.skola.kurs.value;
}
}
}

"Izvlacenje" imena cekiranog polja sam pokusao na nacin:

var potD = document.getElementById("dani"); //select box ima name="dan" id="dani"
var potDanTekst = potD.options{potD.selectedIndex}.text;

u alert box sam pozivao funkciju, promenljive potK i PotDanTekst ali nista.

[ joseph.magnum @ 13.02.2012. 16:41 ] @

Moras opet paziti na sintaksu:

Code:

for (i=0; i < document.skola.kurs.lentgh; i++) { // opet typ-o, length

Checkboxovi istog imena se racunaju kao niz, te su im potrebni indexi:

Code:

if (document.skola.kurs[i].checked == true){
            potvrkurs = document.skola.kurs[i].value;
}

Javlja se problem, npr - izaberem CAE i CPE, i hocu da ih slusam utorkom. Prodje validaciju, potvrkurs ima vrednost CPE.

E sad, sta si ti probao da implementiras, a i ja sa tobom ;)
Pa da vidimo, npr ne postoji id="dani". Dodat je u <select> tag.

Code:

var potD = document.getElementById("dani"); //select box ima name="dan" id="dani"

Viticaste zagrade se koriste kao telo funkcije, objekta i sl. Uglaste zagrade koristimo za indexe elemenata niza:

Code:

var potDanTekst = potD.options[potD.selectedIndex].text;

I na kraju odradimo ispis u alert()

Code:

alert("Uspesno ste se prijavili na " + potvrkurs + " kurs za grupu " + potDanTekst);

Evo i celog koda:

Code:

<script>
    function potvrdaKurs() {
        alert("Usao sam u povrda kurs fju. kurs.len = " + document.skola.kurs.length);
        var potvrkurs;
        for (var i=0; i < document.skola.kurs.length; i++) { // opet typ-o, length
            if (document.skola.kurs[i].checked == true){
                potvrkurs = document.skola.kurs[i].value; // dobija vrednost FCE
            }
        }

        var potD = document.getElementById("dani");
        // alert(potD);  -> daje HTML Select

        var potDanTekst = potD.options[potD.selectedIndex].text;
        //alert(potDanTekst); -> daje 'Ponedeljak'

        alert("Uspesno ste se prijavili na " + potvrkurs + " kurs za grupu " + potDanTekst);
    }
    function provera(){
        var uzorakIme=/\w{6,}/; //provera da li korisnicko ime ima vise od 6 karaktera
        var uzorakLozinka=/\w{8,}/; // provera da li lozinka ima vise od 8 karaktera

        ime     = document.skola.ime.value;
        lozinka    = document.skola.lozinka.value;

        if (uzorakIme.test(ime) == false) {
            alert ("Greška!!! Korisnicko ime nema minimalno 6 karaktera");
            return 0;
        }

        if (uzorakLozinka.test(lozinka) == false) {
            alert ("Greška!!! Lozinka nema minimalno 8 karaktera");
            return 0;
        }

        var dan = document.skola.dan.value; // vrednosti 1-7


        if(document.skola.kurs[0].checked != true
        && document.skola.kurs[1].checked != true
        && document.skola.kurs[2].checked != true
        && document.skola.kurs[3].checked != true
        && document.skola.godina[0].checked != true
        && document.skola.godina[1].checked != true
        && document.skola.godina[2].checked != true) {
            // ako nista nije cekirano
            alert ("Greška!!! Nije odabran kurs ili godina ucenja!");
        }
        else if(!(dan == "1" || dan == "3" || dan == "5") && document.skola.kurs[0].checked == true){
            // ako je FCE izabran uto-cet-vikend
            alert ("Greška!!! Kurs FCE koji je odabran ne možete slušati tog dana!"); //kurs FCE moze ponedeljak-sreda-petak
        }
        else if(!(dan == "2" || dan == "4") && (document.skola.kurs[1].checked == true || document.skola.kurs[2].checked == true)){
            alert ("Greška!!! Kurs CAE ili CPE koji je odabran ne možete slušati tog dana!"); //kursevi CAE i CPE mogu utorak-cetvrtak
        }
        // ovde je pisalo 'ture' umesto 'true'
        else if (!(dan == "6" || dan == "7") && document.skola.kurs[3].checked == true){
            alert ("Greška!!! Kurs TOEFL koji je odabran ne možete slušati tog dana"); //kurs TOEFL moze samo vikendom (subota-nedelja)
        }
        else {
            //alert ("Sada je sve u redu");
            potvrdaKurs();

        }

    }
  </script>

[ bantes9 @ 13.02.2012. 23:35 ] @

Greska u sintaksi se pojavila kada sam na brzinu rekonstruisao kod (imao sam dosta varijanti pri pokusaju da resim problem), kako bih ga postavio nazad ovde, ali definitivno, se ponekad u brzini potkrade neka greska i to cu gledati da ispravim :)

Gledajuci resenje difinitivno sam u nekom momentu bio blizu (google-juci primere sa slicnom tematikom) ali mi je problem predstavljao poslednji korak jer nisam znao kako da u alert-u pozovem potrebne detalje a u stvari, to je trebalo uraditi na totalno drugi nacin.

Definitivno sam iz ovog primera naucio dosta novih sitnica i sada su mi neke stvari jasnije. Hvala jos jednom na izdvojenom vremenu, pomoci i detaljnom objasnjenju, znaci puno u ovim pocetnim koracima, kada je svaki problem ko kuca velik :)

Pozdrav.

Javascript i AJAX
Validacija forme, ukoliko je sve OK, ispis izabranih opcija pomocu alert-a, potrebna pomoc
[ http://www.elitesecurity.org/t445589 ]

Copyright (C) 2001-2024 by www.elitesecurity.org. All rights reserved.