---

Hej NG

Jeg har et javascript der gerne skulle køres når en bruger forlader et felt.
Brugeren kan ikke forlade feltet hvis javascriptet ikke valideres korrekt.
Men hvad sætter jeg på mit tekstfelt før det kan lade sig gøre?

Tak

---

"Hans Petersen" <hp@fds.dk> writes:

> Jeg har et javascript der gerne skulle køres når en bruger forlader et felt.
> Brugeren kan ikke forlade feltet hvis javascriptet ikke valideres korrekt.
> Men hvad sætter jeg på mit tekstfelt før det kan lade sig gøre?

Prøv:
<input onblur="if (!validates(this.value)) this.focus();">
hvor "validates" er en funktion der afgør om indholdet validerer.

Pas dog på med den slags scripts, der helt forhindrer folk i at skifte
fokus. Hvis de bruger keyboard til at navigere og ikke kan/vil skrive
noget der validerer, så sidder de fast. Du kunne evt. bare skifte
elementes farve til rød hvis det ikke validerer eller lave en alert,
så er de advaret.

/L
--
Lasse Reichstein Nielsen - lrn@hotpop.com
Art D'HTML: <URL:http://www.infimum.dk/HTML/randomArtSplit.html>
'Faith without judgement merely degrades the spirit divine.'

---

> Prøv:
> <input onblur="if (!validates(this.value)) this.focus();">
> hvor "validates" er en funktion der afgør om indholdet validerer.
>
> Pas dog på med den slags scripts, der helt forhindrer folk i at skifte
> fokus. Hvis de bruger keyboard til at navigere og ikke kan/vil skrive
> noget der validerer, så sidder de fast. Du kunne evt. bare skifte
> elementes farve til rød hvis det ikke validerer eller lave en alert,
> så er de advaret.

Ok. Kan godt se problemstillingen nu.

Jeg har 6 felter. Fornavn, Efternavn, Tlf, Brugernavn, Password og Email.

Det første script validerer om felterne er udfyldt. Det andet script
validerer om email er udfyldt korrekt. Men kan jeg ved at trykke på en knap
validere begge scripts eller skal de 2 scripts laves om til et enkelt?

Hvis nogen kan må de meget gerne blande de 2 scripts til et enkelt der
validerer om de første 5 felter er udfyldt og om det sidste felt email er
korrekt udfyldt.

Nedenstående ses de 2 scripts. Håber ikke det er for meget kode til nogen
gider hjælpe mig.

P.S. Begge scripts er snuppet fra html.dk.

---------------------------------------------------------------------

<script type="text/javascript">

function validering()
{
error = 0;

placering=0;
tekst=(document.forms[0].email.value).toLowerCase();
placering=tekst.indexOf("@");
if(tekst ==""){
alert ("Der skal stå en e-post adresse i tekst feltet");
error = 1;
}
else{
tegn=tekst.indexOf(" ");
if(tegn!=-1){
alert ("Der må ikke være mellemrum i adressen");
error = 1;
}
else{
if (tekst.indexOf("æ")!=-1 || tekst.indexOf("ø")!=-1 ||
tekst.indexOf("å")!=-1 ||
tekst.indexOf("Æ")!=-1 || tekst.indexOf("Ø")!=-1 ||
tekst.indexOf("Å")!=-1 ||
tekst.indexOf(";")!=-1 || tekst.indexOf(",")!=-1){
alert ("Der er ulovlige tegn i adressen. Må ikke indeholde: æ ø å Æ
Ø Å , ;");
error = 1;
}
else{
if (placering<1 || tekst.length<=(placering+1)){
alert ("e-post adressen er forkert - forsøg igen");
error = 1;
}
}
}
}
if(error == 0)
document.forms[0].submit();
}
</script>

---------------------------------------------------------------------

<script type="text/javascript">

function validering()
{
error = 0;

if((document.forms[0].fornavn.value=='') && (error==0))
{
alert('Fornavn skal udfyldes!');
document.forms[0].fornavn.focus();
error = 1;
}

if((document.forms[0].efternavn.value=='') && (error==0))
{
alert('Efternavn skal udfyldes!');
document.forms[0].efternavn.focus();
error = 1;
}

if((document.forms[0].tlf.value=='') && (error==0))
{
alert('Tlf. nr. skal udfyldes!');
document.forms[0].tlf.focus();
error = 1;
}

if((document.forms[0].brugernavn.value=='') && (error==0))
{
alert('Brugernavn skal udfyldes!');
document.forms[0].brugernavn.focus();
error = 1;
}

if((document.forms[0].password.value=='') && (error==0))
{
alert('Password skal udfyldes!');
document.forms[0].password.focus();
error = 1;
}

if((document.forms[0].email.value=='') && (error==0))
{
alert('E-mail skal udfyldes!');
document.forms[0].email.focus();
error = 1;
}


if(error == 0)
document.forms[0].submit();
}

</script>
---------------------------------------------------------------------

---

"Hans Petersen" <hp@fds.dk> writes:

> Jeg har 6 felter. Fornavn, Efternavn, Tlf, Brugernavn, Password og Email.
>
> Det første script validerer om felterne er udfyldt. Det andet script
> validerer om email er udfyldt korrekt. Men kan jeg ved at trykke på en knap
> validere begge scripts eller skal de 2 scripts laves om til et enkelt?

Som de er skrevet nu, så kan du ikke bruge begge. Det skyldes at de begge
slutter af med at submitte formen, så du kan kun nå at udføre den ene.

> Hvis nogen kan må de meget gerne blande de 2 scripts til et enkelt der
> validerer om de første 5 felter er udfyldt og om det sidste felt email er
> korrekt udfyldt.

Det kan man sagtens.

> Nedenstående ses de 2 scripts. Håber ikke det er for meget kode til nogen
> gider hjælpe mig.

Det er forholdsvis simpel kode, så det går :)

> P.S. Begge scripts er snuppet fra html.dk.

Man kan sagtens lave valideringerne som mere end en funktion (jeg vil
faktisk anbefale det), man skal bare ikke lade hver af dem submitte
formen.

> <script type="text/javascript">
>
> function validering()
....

Det kan klares lidt nemmere med regulære udtryk. Her er et par funktioner
der samler fejlbeskedder op og kun laver en alert i stedet for en per fejl.
Brugere bliver glade for den slags detaljer :)

function validerEMail() {
var tekst = document.forms[0].elements["email"].email.value;
if (tekst == "") {
return "E-post-adressen skal udfyldes.\n";
}
if (! tekst.match(/^[^@]+@[^@]+\.[^@]+$/)) {
//tester at der kun er et snabel-a og mindste et punktum efter det
return "E-post-adressen er ikke på formen \"xxx@yyy.\".\n";
}
var errors="";
if (tekst.indexOf(" ")>=0) {
errors += "Mellemrum er ikke tilladt i e-post-adresser.\n";
}
if (tekst.match(/[æÆøØåÅ]/)) {
errors += "Danske tegn er ikke tillade i e-post-adresser.\n";
}
return errors;
}

function validerFelter() {
var errors="";
var form = document.forms[0];
if (form.elements["fornavn"].value == "") {
errors+="Fornavn skal udfyldes.\n";
}
if (form.elements["efternavn"].value == "") {
errors+="Efternavn skal udfyldesn.\n";
}
if (form.elements["tlf"].value == "") {
errors+="Telegonnummer skal udfyldes.\n";
}
if (form.elements["brugernavn"].value == "") {
errors+="Brugernavn skal udfyldes.\n";
}
if (form.elements["password"].value == "") {
errors+="Password skal udfyldes.\n";
}
// email klares af email-tjekkeren
}

Dise funktioner kan så bruges af en samlet valideringsfunktion:

function validate() {
var error="";
error += validerFelter();
error += validerEMail();
if (error != "") {
alert("Formularen er ikke udfyldt korrekt:\n\n"+error)
return false;
}
return true;
}

Denne funktion kan kaldes i formens onsubmit-handler

<form ... onsubmit="return validate()">

Koden er ikke testet, der kan være tyrkfajl!
/L
--
Lasse Reichstein Nielsen - lrn@hotpop.com
Art D'HTML: <URL:http://www.infimum.dk/HTML/randomArtSplit.html>
'Faith without judgement merely degrades the spirit divine.'

---

> Det kan klares lidt nemmere med regulære udtryk. Her er et par funktioner
> der samler fejlbeskedder op og kun laver en alert i stedet for en per
fejl.
> Brugere bliver glade for den slags detaljer :)
>
> function validerEMail() {
> var tekst = document.forms[0].elements["email"].email.value;
> if (tekst == "") {
> return "E-post-adressen skal udfyldes.\n";
> }
> if (! tekst.match(/^[^@]+@[^@]+\.[^@]+$/)) {
> //tester at der kun er et snabel-a og mindste et punktum efter det
> return "E-post-adressen er ikke på formen \"xxx@yyy.\".\n";
> }
> var errors="";
> if (tekst.indexOf(" ")>=0) {
> errors += "Mellemrum er ikke tilladt i e-post-adresser.\n";
> }
> if (tekst.match(/[æÆøØåÅ]/)) {
> errors += "Danske tegn er ikke tillade i e-post-adresser.\n";
> }
> return errors;
> }
>
> function validerFelter() {
> var errors="";
> var form = document.forms[0];
> if (form.elements["fornavn"].value == "") {
> errors+="Fornavn skal udfyldes.\n";
> }
> if (form.elements["efternavn"].value == "") {
> errors+="Efternavn skal udfyldesn.\n";
> }
> if (form.elements["tlf"].value == "") {
> errors+="Telegonnummer skal udfyldes.\n";
> }
> if (form.elements["brugernavn"].value == "") {
> errors+="Brugernavn skal udfyldes.\n";
> }
> if (form.elements["password"].value == "") {
> errors+="Password skal udfyldes.\n";
> }
> // email klares af email-tjekkeren
> }
>
> Dise funktioner kan så bruges af en samlet valideringsfunktion:
>
> function validate() {
> var error="";
> error += validerFelter();
> error += validerEMail();
> if (error != "") {
> alert("Formularen er ikke udfyldt korrekt:\n\n"+error)
> return false;
> }
> return true;
> }
>
> Denne funktion kan kaldes i formens onsubmit-handler
>
> <form ... onsubmit="return validate()">
>
> Koden er ikke testet, der kan være tyrkfajl!

Hmm. Tak indtil videre, men min browser fanger ingen felter.

Skal koden stå i <head> eller <body>?

Skal koden stå ud i et, eller skal den deles op i 3 stykker?

Tak igen

---

"Hans Petersen" <hp@fds.dk> writes:

> Hmm. Tak indtil videre, men min browser fanger ingen felter.

Hvis du har siden online, så er det nemmere at se hvad der går galt
(som sagt var koden ikke testet :)

> Skal koden stå i <head> eller <body>?

Den skal pakkes ind i
<script type="text/javascript">
og
</script>
men det er ligegyldigt hvor den så står. Head er det mest normale.

> Skal koden stå ud i et, eller skal den deles op i 3 stykker?

Det er også ligegyldigt.

Jeg sætter lige Followup-To (FUT) til dk.edb.internet.webdesign.clientside,
da det jo handler om javascript.

/L
--
Lasse Reichstein Nielsen - lrn@hotpop.com
Art D'HTML: <URL:http://www.infimum.dk/HTML/randomArtSplit.html>
'Faith without judgement merely degrades the spirit divine.'

---

> Hvis du har siden online, så er det nemmere at se hvad der går galt
> (som sagt var koden ikke testet :)

Jeg har den desværre kun lokalt, men hele koden er nederst på siden.

> > Skal koden stå i <head> eller <body>?
>
> Den skal pakkes ind i
> <script type="text/javascript">
> og
> </script>

Jeg har pakket den ind i <script>

Nedenstående er hele koden:

----------------------------------------------------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">


<!--#include virtual="ksbh/nye/banner.asp"-->

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Opret bruger</title>
<link rel="stylesheet" href="../nye/style.css" type="text/css">
</head>

<body>

<script type="text/javascript">

function validerEMail() {
var tekst = document.forms[0].elements["email"].email.value;
if (tekst == "") {
return "E-post-adressen skal udfyldes.\n";
}
if (! tekst.match(/^[^@]+@[^@]+\.[^@]+$/)) {
//tester at der kun er et snabel-a og mindste et punktum efter det
return "E-post-adressen er ikke på formen \"xxx@yyy.\".\n";
}
var errors="";
if (tekst.indexOf(" ")>=0) {
errors += "Mellemrum er ikke tilladt i e-post-adresser.\n";
}
if (tekst.match(/[æÆøØåÅ]/)) {
errors += "Danske tegn er ikke tillade i e-post-adresser.\n";
}
return errors;
}

function validerFelter() {
var errors="";
var form = document.forms[0];
if (form.elements["fornavn"].value == "") {
errors+="Fornavn skal udfyldes.\n";
}
if (form.elements["efternavn"].value == "") {
errors+="Efternavn skal udfyldesn.\n";
}
if (form.elements["tlf"].value == "") {
errors+="Telegonnummer skal udfyldes.\n";
}
if (form.elements["brugernavn"].value == "") {
errors+="Brugernavn skal udfyldes.\n";
}
if (form.elements["password"].value == "") {
errors+="Password skal udfyldes.\n";
}
// email klares af email-tjekkeren
}

//Dise funktioner kan så bruges af en samlet valideringsfunktion:

function validate() {
var error="";
error += validerFelter();
error += validerEMail();
if (error != "") {
alert("Formularen er ikke udfyldt korrekt:\n\n"+error)
return false;
}
return true;
}

</script>

<table width="90%" cellspacing="0" cellpadding="0" border="1"
align="center">
<tr>
<!--#include virtual="ksbh/nye/menutop.asp"-->
</tr>
</table>

<table width="90%" cellspacing="0" cellpadding="0" border="1"
align="center">
<tr>
<!--#include virtual="ksbh/nye/menulinie.asp"-->
</tr>
</table>

<form action="" method="post" onsubmit="validate( );">

<table width="90%" cellspacing="0" cellpadding="2" border="1"
align="center">
<thead>
<tr>
<th width="78%" class="thvenstre">Login</th>
<th width="22%" class="thhoejre">Nyheder</th>
</tr>
</thead>
<tr>
<td class="tdvenstre" width="69%">
<br><p>Opret dig som bruger på brugt-hardware.dk</p><p>Oplysningerne er
fortroelige og bliver ikke videresendt til 3. part</p>
<table width="85%" cellspacing="0" cellpadding="0" border="1"
align="left">
<tr>
<td class="sortramme">
<br>
<table>
<tr>
<td width="38%" class="tdinner"><p>Fornavn:</p></td><td><input
type="text" name="fornavn" size="10"><h6>Dit fornavn skal bruges som
kontaktoplysninger hvis du skal sælge hardware<br><b>*Dette felt skal
udfyldes.</b></h6></td>
</tr>
<tr>
<td width="38%" class="tdinner"><p>Efternavn:</p></td><td><input
type="text" name="efternavn" size="10"><br><h6>Dit efternavn skal bruges som
kontaktoplysninger hvis du skal sælge hardware<br><b>*Dette felt skal
udfyldes.</b></h6></td>
</tr>
<tr>
<td width="38%" class="tdinner"><p>Tlf. nr</p></td><td><input
type="text" name="tlf" size="10"><br><h6>Dit tlf. mr. bruges kun i
forbindelse med en køber skal i kontakt med dig<br><b>*Dette felt skal
udfyldes.</b></h6></td>
</tr>
<tr>
<td width="38%" class="tdinner"><p>Brugernavn:</p></td><td><input
type="text" name="brugernavn" size="10"><br><h6>Dit brugernavn skal bruges
til at logge på vores side.<br><b>*Dette felt skal udfyldes.</b></h6></td>
</tr>
<tr>
<td width="38%" class="tdinner"><p>Password:</p></td><td><input
type="text" name="password" size="10"><br><h6>Dit password skal bruges til
at logge på vores side.<br><b>*Dette felt skal udfyldes.</b></h6></td>
</tr>
<tr>
<td width="38%" class="tdinner"><p>E-mail
addresse:</p></td><td><input type="text" name="email" size="30"><br><h6>Du
skal være omhyggelig med at udfylde dette felt korrekt.<br>Det er denne
addresse dit brugernavn og password sendes til.<br><b>*Dette felt skal
udfyldes.</b></h6></td>
</tr>
<tr>
<td width="38%" class="tdinner"></td><td><input type="submit"
value="Opret"></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td width="22%" align="left" class="tdhoejre" style="vertical-align:top">
<!--#include virtual="ksbh/nye/nyheder.asp"-->
</td>
</tr>
</table>

</form>

<table width="90%" cellspacing="0" cellpadding="0" border="1"
align="center">
<tr>
<!--#include file="bund.asp"-->
</tr>
</table>

</body>
</html>

---

"Hans Petersen" <hp@fds.dk> writes:

> > Hvis du har siden online, så er det nemmere at se hvad der går galt
> > (som sagt var koden ikke testet :)
>
> Jeg har den desværre kun lokalt, men hele koden er nederst på siden.

Det fylder en del, og det kan introducere ekstra fejl at sende det med
i et nyhedsindlæg, så hvis du har mulighed for at uploade siden til
en webserver et sted en anden gang, så er det en stor fordl.

> function validerEMail() {
> var tekst = document.forms[0].elements["email"].email.value;

Her fumlede jeg, da jeg slog to linjer sammen. Det skulle kun være

var tekst = document.forms[0].elements["email"].value;

Jeg tror det er den eneste fejl der havde sneget sig ind.
/L
--
Lasse Reichstein Nielsen - lrn@hotpop.com
Art D'HTML: <URL:http://www.infimum.dk/HTML/randomArtSplit.html>
'Faith without judgement merely degrades the spirit divine.'

---

> Det fylder en del, og det kan introducere ekstra fejl at sende det med
> i et nyhedsindlæg, så hvis du har mulighed for at uploade siden til
> en webserver et sted en anden gang, så er det en stor fordl.

Ved det godt men havde ingen steder pt. at uploade det.

> > function validerEMail() {
> > var tekst = document.forms[0].elements["email"].email.value;
>
> Her fumlede jeg, da jeg slog to linjer sammen. Det skulle kun være
>
> var tekst = document.forms[0].elements["email"].value;

Tak Lasse, det hjalp. Nu validerer den i hvert fald email addressen.

2 problemer mere hvis du har tid.

Jeg havde 6 felter med email som det sidste. Den validerer først email
addressen. Kan det laves om så den først checker de andre felter?

Hvis jeg trykker submit uden at udfylde nogen felter får jeg følgende:

--------------------------------------------
Formularen er ikke udfyldt korrekt:

undefinedE-post-adressen skal udfyldes
--------------------------------------------

Hvorfor skriver den undefined? Det har jeg jo ikke stående i min kode.
Sikkert et ret dumt spg.

Kan den ikke skrive alle de felter der skal udfyldes. Det er jo ikke kun
email addressen der mangler.

Tak

---

Det er altså mig igen.

Fejlen skyldes at Bo "min ven" brugte denne NG i går

Hilsen
Hans Petersen

---

"Bo Jensen" <BJ> writes:

> Jeg havde 6 felter med email som det sidste. Den validerer først email
> addressen. Kan det laves om så den først checker de andre felter?

Det gør den faktisk. Der var bare en fejl til :)

Sidst i validerFelter (lige inden sluttuborgen "}") skal der tilføjes
en linje:
return errors;

Den glemmer at returnere de fejl den har fundet.

> Hvorfor skriver den undefined? Det har jeg jo ikke stående i min kode.
> Sikkert et ret dumt spg.

Næh. Fejlen er at fejlene ikke bliver returneret fra
validerFelter-funktionen. Der bliver ikke returneret noget som helst,
så derfor får vi standard-værdien "udefined".

> Kan den ikke skrive alle de felter der skal udfyldes. Det er jo ikke kun
> email addressen der mangler.

Det skulle den gøre med den ekstra linje.

/L
--
Lasse Reichstein Nielsen - lrn@hotpop.com
Art D'HTML: <URL:http://www.infimum.dk/HTML/randomArtSplit.html>
'Faith without judgement merely degrades the spirit divine.'

---

> Det skulle den gøre med den ekstra linje.

Tusind tak. Det virker jo

---

> Det skulle den gøre med den ekstra linje.
>
> Tusind tak. Det virker jo

Troede jeg. Har først testet det ordentligt nu. Den eneste fejl jeg får nu
er følgende:

Udfylder jeg hele formularen går det helt fint og jeg sender videre til en
ny side der sætter dataen i en database og siger tak fordi du oprettede dig
som bruger blah blah.

Udfylder jeg kun nogle felter kommer javascript fejlen ordentligt op.
Trykker jeg ok til den videre sendes jeg til siden jeg forklarede om
ovenstående. Det skal jeg jo først når alle felter er udfyldt.

Håber du har tid til lidt ekstra hjælp.

Tak

---

> Troede jeg. Har først testet det ordentligt nu. Den eneste fejl jeg får nu
> er følgende:
>
> Udfylder jeg hele formularen går det helt fint og jeg sender videre til en
> ny side der sætter dataen i en database og siger tak fordi du oprettede
dig
> som bruger blah blah.
>
> Udfylder jeg kun nogle felter kommer javascript fejlen ordentligt op.
> Trykker jeg ok til den videre sendes jeg til siden jeg forklarede om
> ovenstående. Det skal jeg jo først når alle felter er udfyldt.
>
> Håber du har tid til lidt ekstra hjælp.
>
> Tak

Det jeg mangler er at hvis der ingen fejl er submittes formen ellers gøres
det ikke.

Hvordan implementeres det?

---

"Hans Petersen" <hp@fds.dk> writes:

> Det jeg mangler er at hvis der ingen fejl er submittes formen ellers gøres
> det ikke.
>
> Hvordan implementeres det?

Jeg kan se at du glemte et "return" i onsubmit-handleren. Prøv at
sætte det ind, altså:

<form ... onsubmit="return validate()">

Det skulle gøre at man returnerer false hvis formen ikke validerer, og
det skulle (7-9-13) forhindre at formens action bliver udført.

/L
--
Lasse Reichstein Nielsen - lrn@hotpop.com
Art D'HTML: <URL:http://www.infimum.dk/HTML/randomArtSplit.html>
'Faith without judgement merely degrades the spirit divine.'