Avatar billede jjdk Nybegynder
09. januar 2006 - 12:20 Der er 9 kommentarer og
1 løsning

Validering af flere felter

Hej. Jeg er ved at lave et lille kørselsregnskab i PHP og MySQL.
Brugerens indtastninger vil jeg gerne have valideret, så jeg sikrer, at de bliver gemt korrekt i MySQL.
Jeg har 2 filer, nemlig indtastningsformularen og PHP-filen der gemmer indtastningerne:
Følgende kontroller ønskes:
Alle felter skal være udfyldt
Dato skal eksistere. I PHP-filen kan jeg lave tjekket med "Checkdate", men det var smartere, at det skette ifm. índtastningen.
Antal_km skal være positive og helt tal

Formen ser sådan her ud:

<form action="koersel_gemmes.php" method="post">
  <input type="text" name="dato" size="10"><br>
  <input type="text" name="antal_km" size="4"><br>
  <input type="text" name="formaal" size="30"><br>
  <input type="text" name="destinationer" size="50"><br>
  <input type="submit" value="Gem indtastning">
</form>

Jeg håber på færdig kode, hvilket jeg også giver point efter.
Avatar billede jjdk Nybegynder
09. januar 2006 - 18:59 #1
Hulk hulk - er der slet ikke nogen der kan hjælpe.........
Avatar billede roenving Novice
10. januar 2006 - 03:26 #2
Gerne, men der er ikke tid før Eksperten går død til at klare dette 30-points-spørgsmål ...

Vender tilbage i morgen !-)
Avatar billede jjdk Nybegynder
10. januar 2006 - 07:57 #3
Jeg har fundet en masse gode tutorials, og jeg kan ogå finde ud af, at få 1 til at virke, men flere det kniber gevaldigt. Til inspiration (hvis det overhovedet er nødvendigt, har jeg fundet disse:

Denne her sørger for at curseren placeres i første indtastningsfelt, når formen indlæses
http://javascript.internet.com/forms/first-form-field.html#source
Denne her sikrer korrekt syntax på datoen og sætter løbende skilletegnene
http://javascript.internet.com/forms/format-date.html#source
Den her sørger for, at der springes videre til næste felt, når alle tegnene er sat i felet:
http://javascript.internet.com/forms/auto-tab.html#source

Jeg er spændt på at se koden......
Avatar billede roenving Novice
10. januar 2006 - 15:47 #4
F.eks.

<script type="text/javascript">
function checkDate(elm){
var d = elm.value.split(/[\/-]/);
if(d.length == 1){
  alert("Fejl i datoformat");
  return false;
}
var dato = new Date(d[2],d[1]-1,d[0]);
if(dato.getFullYear() != d[2] || dato.getMonth()+1 != d[1] || dato.getDate() != d[0]){
  alert("Ugyldig dato");
  return false;
}
return true;
}
function valider(f){
  if(!checkDate(f.dato)){
    f.dato.select();
    f.dato.focus();
    return false;
  }
  if(!f.antal_km.value.match(/^\d+$/)){
    alert("Kilometertal skal udfyldes");
    f.antal_km.select();
    f.antal_km.focus();
    return false;
  }
  if(f.formaal.value==""){
    alert("Formål skal udfyldes");
    f.formaal.select();
    f.formaal.focus();
    return false;
  }
  if(f.destinationer.value==""){
    alert("Destinationer skal udfyldes");
    f.destinationer.select();
    f.destinationer.focus();
    return false;
  }
  return true;
}
</script>

<form action="koersel_gemmes.php" method="post" onsubmit="return valider(this);">
<table>
  <tr>
    <td>Dato:<br>(dd-mm-åååå)</td>
    <td><input type="text" name="dato" size="10" onkeyup="val=this.value.replace(/[\/-]/g,'');if(val.match(/\d{8}/) && checkDate(this)){this.form.antal_km.focus()}else{this.focus()};"></td>
  </tr>
  <tr>
    <td>Antal kilometer:</td>
    <td><input type="text" name="antal_km" size="4" onblur="if(this.value=='' && this.form.dato.value!='')this.focus();"></td>
  </tr>
  <tr>
    <td>Formål med kørslen:</td>
    <td><input type="text" name="formaal" size="30"></td>
  </tr>
  <tr>
    <td>Destinationer:&nbsp;</td>
    <td><textarea type="text" name="destinationer" cols="50" rows="5"></textarea></td>
  <tr>
    <td colspan="2" align="center"><input type="submit" value="Gem indtastning"></td>
  </tr>
</table>
</form>
Avatar billede roenving Novice
10. januar 2006 - 15:54 #5
-- og jeg glemte at indsætte fokus på første felt-tingen, så du skal indsætte dette i javascript-blokken, f.eks. efter den sidste tuborg og før </script>:

window.onload = function(){
  document.forms[0].dato.focus();
}
Avatar billede jjdk Nybegynder
10. januar 2006 - 19:12 #6
Når jeg trykker på Submit-knappen, forsætter den bare til min php-fil. Der kontrolleres ikke!
Koden ser sådan her ud:
<head>
<script type="text/javascript">
function checkDate(elm){
var d = elm.value.split(/[\/-]/);
if(d.length == 1){
  alert("Fejl i datoformat");
  return false;
}
var dato = new Date(d[2],d[1]-1,d[0]);
if(dato.getFullYear() != d[2] || dato.getMonth()+1 != d[1] || dato.getDate() != d[0]){
  alert("Ugyldig dato");
  return false;
}
return true;
}
function valider(f){
  if(!checkDate(f.dato)){
    f.dato.select();
    f.dato.focus();
    return false;
  }
  if(!f.antal_km.value.match(/^\d+$/)){
    alert("Kilometertal skal udfyldes");
    f.antal_km.select();
    f.antal_km.focus();
    return false;
  }
  if(f.formaal.value==""){
    alert("Formål skal udfyldes");
    f.formaal.select();
    f.formaal.focus();
    return false;
  }
  if(f.destinationer.value==""){
    alert("Destinationer skal udfyldes");
    f.destinationer.select();
    f.destinationer.focus();
    return false;
  }

}

  return true;
window.onload = function(){
  document.forms[0].dato.focus();
}

</script>
</head>

<body>
<form action="koersel_gemmes.php" method="post" onsubmit="return valider(this);">
<table>
  <tr>
    <td>Dato:<br>(dd-mm-åååå)</td>
    <td><input type="text" name="dato" size="10" onkeyup="val=this.value.replace(/[\/-]/g,'');if(val.match(/\d{8}/) && checkDate(this)){this.form.antal_km.focus()}else{this.focus()};"></td>
  </tr>
  <tr>
    <td>Antal kilometer:</td>
    <td><input type="text" name="antal_km" size="4" onblur="if(this.value=='' && this.form.dato.value!='')this.focus();"></td>
  </tr>
  <tr>
    <td>Formål med kørslen:</td>
    <td><input type="text" name="formaal" size="30"></td>
  </tr>
  <tr>
    <td>Destinationer:&nbsp;</td>
    <td><textarea type="text" name="destinationer" cols="50" rows="5"></textarea></td>
  <tr>
    <td colspan="2" align="center"><input type="submit" value="Gem indtastning"></td>
  </tr>
</table>
</form>
</body>
Avatar billede roenving Novice
11. januar 2006 - 13:44 #7
Du har fået flyttet return true; -linjen, så det sidste af script-blokken skal se sådan ud:

    return false;
  }
  return true;
}

window.onload = function(){
  document.forms[0].dato.focus();
}
</script>
Avatar billede jjdk Nybegynder
12. januar 2006 - 12:09 #8
Ok - det hjalp og ser interessant ud.
Lige et par ting:
1. Datoen kan jeg splitte med "-" og "/". For at gemme korrekt i MySQL vil jeg gerne, at der kun kan splittes med "-".
2. Kan km. feltet tjekkes, så der maksimalt indtastes 3 cifre. Lige nu kan jeg indtaste mange flere.
3. Er det muligt, at lave en validering, så der ikke indtastes mere end 999 km. og at indtastningen er i hele tal. Hvis jeg skriver med decimaler, er valideringssvaret, "Km. tal skal udfyldes". Her passer det bedre med: "Km. tal skal angives i hele tal".

Tusind tak for hjælpen - du kan bare sende et svar, så jeg kan give dig nogle velfortjente point. (Det kan være, at jeg senere opretter et nyt spørgsmål om en anden slags validering - eksempelvis på email - men som du skriver foroven, kan jeg nøjes med at "ofre" 30 point)
Avatar billede roenving Novice
12. januar 2006 - 15:23 #9
1. Jeg ville selv rette det i sådan et script, for det er en ofte brugt ting:

elm.value = elm.value.replace(/\//g,"-");
var d = elm.value.split("-");
if(d.length < 3){
  alert("Fejl i datoformat");
  return false;
}

-- jeg rettede også lige en anden detalje ...

2 + 3. Vi kan sagtens checke for længden og også differentiere fejlbeskederne, selv vil jeg dog foretrække at beskeden gøres mere sigende:

  if(!f.antal_km.value.match(/^\d{1,3}$/)){
    alert("Kilometertal skal udfyldes med et helt tal under 1000");

-- els velbekomme '-)
Avatar billede roenving Novice
13. januar 2006 - 15:56 #10
-- og tak for point ;~}
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