/ Forside / Teknologi / Udvikling / Java Scripts / Nyhedsindlæg
Login
Glemt dit kodeord?
Brugernavn

Kodeord


Reklame
Top 10 brugere
Java Scripts
#NavnPoint
molokyle 5410
Klaudi 2799
smorch 2439
kim 1360
Harlekin 1134
bentjuul 984
gibson 800
severino 695
Random 675
10  konsulent.. 626
Mangelfuld validering
Fra : Ohlzen


Dato : 19-07-04 07:48

Hej NG,

Jeg har en formular, som et javascript validerer:

<SCRIPT>

// formular tjek start
function tjek_form(){
var tjek = document.bestilling;


// tjekker om feltet email er udfyldt
mail_karakter = false;
falsk_email_karakter = 'ÆØÅæøå, ;';
for(i = 0; i < tjek.email.value.length; i++){
if(falsk_email_karakter.indexOf(tjek.email.value.charAt(i)) !=
-1)
mail_karakter = true;
}

if(tjek.email.value.indexOf('@') <= 0
|| tjek.email.value.indexOf('.') == -1
|| tjek.email.value.indexOf('@') >
tjek.email.value.lastIndexOf('.')
|| mail_karakter == true){
alert('Skriv venligst din:\n\n --> E-mail');
tjek.email.focus();
return false;
}
// email tjek slut


// tjekker om feltet realname er udfyldt
if(tjek.realname.value == ''){
alert('Skriv venligst dit:\n\n --> Navn');
tjek.realname.focus();
return false;
}
// navne tjek slut


// tjekker om feltet adresse er udfyldt
if(tjek.adresse.value == ''){
alert('Skriv venligst din:\n\n --> Adresse');
tjek.adresse.focus();
return false;
}
// adresse tjek slut


// tjekker om feltet postnr. er udfyldt korrekt
var accept_post_numb = '1234567890';
var post_nr = true;
for(i = 0; i < tjek.postnr.value.length; i++){
if(accept_post_numb.indexOf(tjek.postnr.value.charAt(i)) == -1){
var post_nr = false;
}
}
if (post_nr == false
|| tjek.postnr.value.length > 4
|| tjek.postnr.value.length < 4){
alert('Skriv venligst dit:\n\n --> Postnummer');
tjek.postnr.focus();
return false;
}
// postnr. tjek slut


// tjekker om feltet by er udfyldt
if(tjek.by.value == ''){
alert('Skriv venligst din:\n\n --> By');
tjek.by.focus();
return false;
}
// by tjek slut


// tjekker om feltet Telefonnr. er udfyldt korrekt
var accept_tlf_numb = '1234567890';
var telefon_nr = true;
for(i = 0; i < tjek.telefon.value.length; i++){
if(accept_tlf_numb.indexOf(tjek.telefon.value.charAt(i)) == -1){
var telefon_nr = false;
}
}
if (tjek.telefon.value.length > 8 || telefon_nr == false){
alert('Skriv venligst dit:\n\n --> Telefonnummer, dag');
tjek.telefon.focus();
return false;
}
// Telefonnr. tjek slut


// tjekker om der er valgt betalingform
if(tjek.betaling[0].selected == true){
alert('Angiv venligst:\n\n --> Betalingsform');
tjek.betaling.focus();
return false;
}
// betalingform tjek slut

// formular tjek slut
return true;
}
// -->
</SCRIPT>

Min form ser således ud:

<form name="bestilling"
action="http://www.ditnavn.dk/cgi-bin/mitmailscript.pl"
method="post" onSubmit="return tjek_form();">
<input type="hidden" name="recipient" value="dit@navn.dk">
<input type="hidden" name="fromaddress" value="dit@navn.dk">
<input type="hidden" name="subject" value="Bestilling fra
Shoppen©">
<input type="hidden" name="redirect"
value="http://www.ditnavn.dk/tak.htm">
<input type="hidden" name="return_link_url"
value="http://www.ditnavn.dk/tak.htm">
<input type="hidden" name="Sort" value="">

- og inputfelter således:

<table border="0" width="90%" cellspacing="1" cellpadding="0">
<tr>
<td width="46%"><font face="Trebuchet MS" size="2">

<font color="#FF0000">* </font><input type="text" value="Din
E-mail" style="font-family: Trebuchet MS; font-size: 8 pt; color:
#333333; border: 1 solid #FFFFFF" onfocus="if(this.value=='Din
E-mail')this.value='';"
onblur="if(this.value=='')this.value='Ikke udfyldt';" size="40"
name="email" /></font></td>
<td width="39%" align="center" rowspan="6"><font
face="Trebuchet MS">
<TEXTAREA COLS="36" ROWS="7" WRAP="physical" NAME="kommentar"
style="font-family: Trebuchet MS; font-size: 8 pt; color:
#333333; border: 1 solid #FFFFFF"
onfocus="if(this.value=='Kommentar:')this.value='';"
onblur="if(this.value=='')this.value='Ikke udfyldt';">Kommentar:
</TEXTAREA></font>
<p align="center"><font face="Trebuchet MS">

<INPUT TYPE="SUBMIT" VALUE="Send bestillingen"
style="font-family: Trebuchet MS; font-size: 8 pt; color:
#000000; font-weight: bold">&nbsp;
<INPUT TYPE="RESET" VALUE="Slet alt" style="font-family:
Trebuchet MS; font-size: 8 pt; color: #000000; font-weight:
bold">
</font></td>
</tr>
<tr>
<td width="46%"><font face="Trebuchet MS" size="2">

<font color="#FF0000">* </font><INPUT SIZE="40" MAXLENGTH="80"
NAME="realname" value="Dit navn" style="font-family: Trebuchet
MS; font-size: 8 pt; color: #333333; border: 1 solid #FFFFFF"
onfocus="if(this.value=='Dit navn')this.value='';"
onblur="if(this.value=='')this.value='Ikke
udfyldt';"></font></td>
</tr>
<tr>
<td width="46%"><font face="Trebuchet MS" size="2">

<font color="#FF0000">* </font><INPUT SIZE="40" MAXLENGTH="80"
NAME="adresse" value="Din adresse" style="font-family: Trebuchet
MS; font-size: 8 pt; color: #333333; border: 1 solid #FFFFFF"
onfocus="if(this.value=='Din adresse')this.value='';"
onblur="if(this.value=='')this.value='Ikke
udfyldt';"></font></td>
</tr>
<tr>
<td width="46%"><font face="Trebuchet MS" size="2">

<font color="#FF0000">* </font><INPUT SIZE="6" MAXLENGTH="20"
NAME="postnr" value="Postnr" style="font-family: Trebuchet MS;
font-size: 8 pt; color: #333333; border: 1 solid #FFFFFF"
onfocus="if(this.value=='Postnr')this.value='';"
onblur="if(this.value=='')this.value='Ikke udfyldt';"><b>&nbsp;
</b><INPUT SIZE="30" MAXLENGTH="80" NAME="by" value="By"
style="font-family: Trebuchet MS; font-size: 8 pt; color:
#333333; border: 1 solid #FFFFFF"
onfocus="if(this.value=='By')this.value='';"
onblur="if(this.value=='')this.value='Ikke
udfyldt';"></font></td>
</tr>
<tr>
<td width="46%"><font face="Trebuchet MS" size="2"><font
color="#FF0000">* </font><INPUT SIZE="18" MAXLENGTH="20"
NAME="telefon" value="Tlf. dag" style="font-family: Trebuchet MS;
font-size: 8 pt; color: #333333; border: 1 solid #FFFFFF"
onfocus="if(this.value=='Tlf. dag')this.value='';"
onblur="if(this.value=='')this.value='Ikke udfyldt';">&nbsp;
<INPUT SIZE="18" MAXLENGTH="20" NAME="telefon2" value="Tlf.
aften" style="font-family: Trebuchet MS; font-size: 8 pt; color:
#333333; border: 1 solid #FFFFFF" onfocus="if(this.value=='Tlf.
aften')this.value='';" onblur="if(this.value=='')this.value='Ikke
udfyldt';"></font></td>
</tr>
<tr>
<td width="46%"><font face="Trebuchet MS" size="2">

<font color="#FF0000">* </font><SELECT NAME="betaling" size="1"
style="font-family: Trebuchet MS; font-size: 8 pt; color:
#333333; border: 1 solid #FFFFFF">
<OPTION SELECTED>Vælg den ønskede betalingsform her:
       <OPTION>Pr. efterkrav
       <OPTION>Forudbetaling med check
       <option>Forudbetaling via netbank</option>
       <option>Forudbetaling via eWIRE</option>
</SELECT>
</font></td>
</tr>
<tr>
<td width="66%" colspan="2">
</td>
</tr>
</table>

... som selvfølgelig afsluttes med </form>

Ved godt det var en længere smørre, men hvorfor tjekker den KUN
"email", "postnummer", telefon, dag" og "betalingsform"???

Håber der en venlig sjæl, som kan se en løsning på problemet...

\Ohlzen





--
Vil du lære at kode HTML, XHTML, CSS, SSI eller ASP?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

 
 
Lasse Reichstein Nie~ (19-07-2004)
Kommentar
Fra : Lasse Reichstein Nie~


Dato : 19-07-04 20:49

Ohlzen <jean@fedtmules.dk> writes:

> Jeg har en formular, som et javascript validerer:

[flyttet fra sidst i indlæg:]
> Ved godt det var en længere smørre, men hvorfor tjekker den KUN
> "email", "postnummer", telefon, dag" og "betalingsform"???

Lad os se på det.

Det ville være godt med et link til en side hvor vi kan se det
i aktion. Det gør det *meget* nemmere at teste, specielt når du
ikke giver hele HTML'en med (ikke fordi du skal gør det! Det
fylder også mindre at give et link).

Du har heller ikke fortalt hvad der går galt (Hvordan kan du se at den
ikke tjekker mere? Giver den en fejlbesked? Har du fejlbeskedder slået
til i din browser? (ellers gør det!))

Et par gode råd til når man beder om hjælp med den her slags, til
en anden gang (for din egen skyld!):
<URL: http://www.infimum.dk/HTML/hjaelpmig.html >


Ok, efter at have puttet dit script ind på en side, så ser det ud til
at den også tjekker at både "Adresse" og "By" er udfyldt. Læg dog
mærke til at de *starter* med at være udfyldt (med værdierne hhv.
"Adresse" og "By"). Du bør altså ikke kun tjekke at de ikke er
tomme, men også at de ikke er den værdi de starter med:

if (tjek.adresse.value == "" || tjek.adresse.value == "Din adresse") {

At "telefon-nat" ikke tjekkes er ikke så underligt. Der er ikke nogen
kode der skal tjekke den i valideringen (en mend skal nok også være
valgfri).

Her er lidt kommentarer:

> <SCRIPT>

Skal være
<script type="text/javascript">
Type-attributten er påkrævet i HTML 4 (den første version af HTML
hvor script-elementet var med).

> // formular tjek start
> function tjek_form(){
> var tjek = document.bestilling;

Jeg ville (fordi jeg er til livrem og seler) skrive:

var tjek = document.forms['bestilling'];

men det er temmeligt sikkert ikke et problem.

> // tjekker om feltet email er udfyldt
> mail_karakter = false;

Husk at bruger "var" til at erklære variablen som lokal til funktionen.
Ellers vil den blive oprettet som global variabel, og der er ingen
grund til at fylde op i det globale objekt.

var mail_karakter = false;

> falsk_email_karakter = 'ÆØÅæøå, ;';
> for(i = 0; i < tjek.email.value.length; i++){
> if(falsk_email_karakter.indexOf(tjek.email.value.charAt(i)) !=
> -1)
> mail_karakter = true;
> }

Jeg ville nok bruge et regulært udtryk:

var mail_karakter = /[æøåÆØÅ, ;]/.test(tjek.email.value);

Det bliver meget kortere :)

....
> // tjekker om feltet postnr. er udfyldt korrekt
> var accept_post_numb = '1234567890';
> var post_nr = true;
> for(i = 0; i < tjek.postnr.value.length; i++){
> if(accept_post_numb.indexOf(tjek.postnr.value.charAt(i)) == -1){
> var post_nr = false;
> }
> }
> if (post_nr == false
> || tjek.postnr.value.length > 4
> || tjek.postnr.value.length < 4){

Igen kan et regulært udtryk gøre underværker:

if (!/^\d{4}$/.test(tjek.postnr.value)) { // tester for præcist 4 cifre

> Min form ser således ud:
>
> <TEXTAREA COLS="36" ROWS="7" WRAP="physical" NAME="kommentar"
> style="font-family: Trebuchet MS; font-size: 8 pt; color:
> #333333; border: 1 solid #FFFFFF"
> onfocus="if(this.value=='Kommentar:')this.value='';"
> onblur="if(this.value=='')this.value='Ikke udfyldt';">Kommentar:
> </TEXTAREA></font>

Jeg kan anbefale at lave et stylesheet i stedet for at skrive det
hele med style-attributter. Det bliver meget mere overskueligt

> <p align="center"><font face="Trebuchet MS">

Og glem alt om font-tagget. Brug CSS i stedet.

Held og lykke.
/L
--
Lasse Reichstein Nielsen - lrn@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'

Ohlzen (24-07-2004)
Kommentar
Fra : Ohlzen


Dato : 24-07-04 11:05

Lasse Reichstein Nielsen wrote in dk.edb.internet.webdesign.clientside:
>
> Lad os se på det.
>
> [Snip-snap-snude]
>
> Held og lykke.
> /L

Jeg siger dig mange mange tak for hjælpen - jeg har printet dit svar ud, og
nørkler lidt med koderierne.

\Ohlzen

--
Vil du lære at kode HTML, XHTML, CSS, SSI eller ASP?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

Søg
Reklame
Statistik
Spørgsmål : 177552
Tips : 31968
Nyheder : 719565
Indlæg : 6408847
Brugere : 218887

Månedens bedste
Årets bedste
Sidste års bedste