Avatar billede Hans1 Praktikant
27. marts 2011 - 11:23 Der er 10 kommentarer og
1 løsning

Validering af selectbox

Hey,

Jeg har et problem med følgende validerings kode som skal validere to selectboxe.
Hvis den ene eller anden ikke er valgt samt begge...

Problemet er at når jeg ikke har valgt noget til at starte med og jeg trykker send så viser den at jeg ikke har valgt noget i både boks 1 samt boks 2.

Det er godt nok men når jeg så kun vælger noget i den ene efter ovenstående så udskriver den satdig at jeg ikke har valgt nogen af dem.

Den virker dog fint hvis jeg starter med kun at vælge en og trykker send.
Så virker den med alle kompinationer.

[code]
<form method="post" action="" onsubmit="validering();return false;">

<div id="1" style="display:none">Intet valgt i boks 1</div>
<div id="2" style="display:none">Intet valgt i boks 2</div>

<select name="boks1">
<option value="" selected>Vælg</option>
<option value="1">1</option>
<option value="2">2 stk</option>
<option value="3">3 stk</option>
</select>

<select name="boks2">
<option value="" selected>Vælg</option>
<option value="3">Large</option>
<option value="4">Medium</option>
<option value="5">Small</option>
</select>

<input type="submit" value="Tilføj til kurv">
</form>



<script type="text/javascript">
function validering() {
if (document.forms[0].boks1.value=='') {
  if (document.forms[0].boks2.value=='') {
  document.getElementById('1').style.display = 'block';
  document.getElementById('2').style.display = 'block';
                      } else {
  document.getElementById('1').style.display = 'block';
                      }
}else {
  if (document.forms[0].boks2.value=='') {
    document.getElementById('2').style.display = 'block';
  } else {
    document.forms[0].submit();
  }
}
}
</script>
[/code]
Avatar billede Hans1 Praktikant
27. marts 2011 - 11:24 #1
Hov! Jeg prøver lige igen:


<form method="post" action="" onsubmit="validering();return false;">

<div id="1" style="display:none">Intet valgt i boks 1</div>
<div id="2" style="display:none">Intet valgt i boks 2</div>

<select name="boks1">
<option value="" selected>Vælg</option>
<option value="1">1</option>
<option value="2">2 stk</option>
<option value="3">3 stk</option>
</select>

<select name="boks2">
<option value="" selected>Vælg</option>
<option value="3">Large</option>
<option value="4">Medium</option>
<option value="5">Small</option>
</select>

<input type="submit" value="Tilføj til kurv">
</form>



<script type="text/javascript">
function validering() {
if (document.forms[0].boks1.value=='') {
  if (document.forms[0].boks2.value=='') {
  document.getElementById('1').style.display = 'block';
  document.getElementById('2').style.display = 'block';
                      } else {
  document.getElementById('1').style.display = 'block';
                      }
}else {
  if (document.forms[0].boks2.value=='') {
    document.getElementById('2').style.display = 'block';
  } else {
    document.forms[0].submit();
  }
}
}
</script>
Avatar billede tjens Nybegynder
27. marts 2011 - 12:13 #2
Undgå altid mange if-else hvis det er muligt.

Pseudokode til ny struktur i funktion validering:

  errorFound = false

  if (boks1 == blank) {
      display blok1
      errorFound = true
  }

  if (boks2 == blank) {
      display blok2
      errorFound = true
  }

  if ( errorFound) {
      return
  }

  submit

Avatar billede Hans1 Praktikant
27. marts 2011 - 13:08 #3
Hvis jeg bruger den kode så står der i browseren udført men med fejl på siden...
Avatar billede olebole Juniormester
27. marts 2011 - 13:29 #4
<ole>

"Pseudokode til ny struktur" skrev manden  *o)

/mvh
</bole>
Avatar billede Hans1 Praktikant
27. marts 2011 - 13:44 #5
Aha så lærte jeg også lige hvad det ord betød :)

Men via den struktur vil den så udkrive begge felter hvis begge íkke er udfyldt eller kun den ene hvis den ikke er udfyldt eller kun den anden hvis den ikke er udfyldt?
Avatar billede olebole Juniormester
27. marts 2011 - 14:15 #6
Ja, det kan du sagtens få den til
Avatar billede tjens Nybegynder
27. marts 2011 - 14:40 #7
#5 Ja, når du gerne vil vise fejlmeldinger til alle felter, er den ingen grund til at bruge else.

I stedet indføres et nyt felt til at huske om der var fejl eller ej. Antal fejl er uden betydning.

Pseudokoden på dansk:

  Sæt Fejlkode til "ingen fejl"

  Hvis første felt har fejl:
      Vis meddelelse om første felt
      Sæt Fejlkode til "fejl"
      Fortsæt

  Hvis andet felt har fejl:
      Vis meddelelse om andet felt
      Sæt Fejlkode til "fejl"
      Fortsæt

  Hvis Fejlkode == "fejl":
      Stop her

  Udfør submit



Så får du ikke bøvl med indviklet if-else struktur hvis der engang skal et tredie felt på formen.
Avatar billede Hans1 Praktikant
27. marts 2011 - 14:47 #8
Okay men nu er jeg ikke så stærk hvad angår javascripts.
Så jeg ville gerne lige hører om dette ser fornuftigt ud:


<script type="text/javascript">
errorFound = false
if (document.forms[0].boks1.value=='') {
      document.getElementById('1').style.display = 'block';
      errorFound = true
  }

  if (document.forms[0].boks2.value=='') {
      document.getElementById('2').style.display = 'block';
      errorFound = true
  }

  if ( errorFound) {
      return
  }

  document.forms[0].submit();

</script>
Avatar billede tjens Nybegynder
27. marts 2011 - 15:10 #9
Tæt på: Der mangler lidt semikolon, og så er det vel også en ide at fjerne fejlmeldingerne fra skærmen, så de forsvinder, hvis en fejl er rettet anden gang, der trykkes på knappen:


function validering() {
  var errorFound = false;
  document.getElementById('1').style.display = 'none';
  document.getElementById('2').style.display = 'none';

  if (document.forms[0].boks1.value=='') {
      document.getElementById('1').style.display = 'block';
      errorFound = true;
  }

  if (document.forms[0].boks2.value=='') {
      document.getElementById('2').style.display = 'block';
      errorFound = true;
  }

  if ( errorFound ) {
      return;
  }

  document.forms[0].submit();
}

Avatar billede Hans1 Praktikant
27. marts 2011 - 15:53 #10
Super...

Tak for hjælpen.

Smid svar
Avatar billede tjens Nybegynder
27. marts 2011 - 16:08 #11
Svar
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester