Permalänk
Medlem

Javascript nybörjare

Hej.
sitter och fnular med en hemsida där jag har ett formulär med java script allt har fungerat utmärkt ända tills jag vill att användaren skall dirigeras om till en annan html sida om formuläret är ifylt korekt... någon som kan hjälpa mig med vad jag gjort för fel?
java script:

<script> <!--funktionen checkFields kontrollerar att alla fälten som måste vara ifylda är ifylda samt att dem fält som skall vara identiska är identiska--> function checkFields() { missinginfo = ""; if ((document.Bli_medlem.Email.value == "") || (document.Bli_medlem.Email.value.indexOf('@') == -1) || (document.Bli_medlem.Email.value.indexOf('.') == -1)) { missinginfo += "\n - Epostadress"; } if (document.Bli_medlem.Email.value != document.Bli_medlem.Email2.value) { missinginfo += "\n - Epostadresserna stämmer inte överens"; } if (document.Bli_medlem.Personnummer.value == "") { missinginfo += "\n - Personnummer"; } if (document.Bli_medlem.Förnamn.value == "") { missinginfo += "\n - Förnamn"; } if (document.Bli_medlem.Efternamn.value == "") { missinginfo += "\n - Efternamn"; } if (document.Bli_medlem.Adress.value == "") { missinginfo += "\n - Adress"; } if (document.Bli_medlem.Postnummer.value == "") { missinginfo += "\n - Postnummer"; } if (document.Bli_medlem.Postort.value == "") { missinginfo += "\n - Postort"; } if (document.Bli_medlem.Mobilnummer.value == "") { missinginfo += "\n - Mobiltelefonnummer"; } if (document.Bli_medlem.Password.value == "") { missinginfo += "\n - Lösenord"; } if (document.Bli_medlem.Password.value != document.Bli_medlem.Password2.value) { missinginfo += "\n - Lösenorden stämmer inte överens"; } if (missinginfo != "") { missinginfo ="_____________________________\n" + "Du har inte fyllt i fälten:\n" + missinginfo + "\n_____________________________" + "\nFyll i de angivna fälten innan du skickar formuläret!"; alert(missinginfo); } else { window.location = "valkommen.html"; } } </script>

html kod:

<section id="member"> <form id="Bli_medlem" name="Bli_medlem" method="post" enctype="text/plain" onSubmit="checkFields();" action=""> <p>Epostadress:<br> <input type="Email" name="Email" id="Email" placeholder="Email"> obligatoriskt</p> <p>Upprepa epostadress:<br> <input type="Email" name="Email2" id="Email2" placeholder="Email"> obligatoriskt</p> <p>Personnummer:<br> <input type="text" name="Personnummer" id="Personnummer" placeholder="YYYY-MM-DD-XXXX" pattern="\d{4}\s?\d{2}\s?\d{2}\s?\d{4}"> obligatoriskt</p> <p>Förnamn:<br> <input type="text" name="Förnamn" id="Förnamn" placeholder="Förnamn"> obligatoriskt</p> <p>Efternamn:<br> <input type="text" name="Efternamn" id="Efternamn" placeholder="Efternamn"> obligatoriskt</p> <p>Adress:<br> <input type="text" name="Adress" id="Adress" placeholder="Adress"> obligatoriskt</p> <p>Postnummer:<br> <input type="text" name="Postnummer" placeholder="Postnummer" pattern="\d{3}\s?\d{2}"> obligatoriskt</p> <p>Postort:<br> <input type="text" name="Postort" id="Postort" placeholder="Postort"> obligatoriskt</p> <p>Telefonnummer:<br> <input type="text" name="Telefonnummer" id="Telefonnummer" placeholder="Telefonnummer"></p> <p>Mobiltelefonnummer:<br> <input type="text" name="Mobilnummer" id="Mobilnummer" placeholder="Mobilnummer" pattern="\d{4}\s?\d{2}\s?\d{2}\s?\d{2}"> obligatoriskt</p> <p>Lösenord (10 tecken A-Z a-z 0-9):<br> <input type="Password" name="Password" id="Password" placeholder="Password" pattern="[A-Za-z0-9]{10}"> obligatoriskt</p> <p>Upprepa lösenord:<br> <input type="Password" name="Password2" id="Password2" placeholder="Password"> obligatoriskt</p> <input type="submit" name="skicka" id="skicka" value="Bli medlem" /> <input type="button" value="Avbryt" onClick="location.href='Home.html'"> </form> </section>

tacksam för svar.

code-taggar
Visa signatur

Dator 1 : Ace Ecco 420 Midi Tower : Ace RawDeal Plus 520W PSU : 2st 120 mm fläkt på sidan : 1st 80 mm fläkt fram : MSI 770-C45 AM3 socket : AMD Phenom II x6 3,3/3,7 MHz : Radeon HD 6770 1GB : 12GB Ram (CL7 och CL9) : BR/DVD : Terateck Aureon 5.1 Ljudkort : SSD 125GB + 500GB + 1TB HDD : Windows 7 64-bit

Permalänk
Hedersmedlem

Jag la till code-taggar för att göra koden aningen mer läsbar.

Mvh
Moderator Shimonu

Permalänk
Medlem
Skrivet av Andez:

Hej.
sitter och fnular med en hemsida där jag har ett formulär med java script allt har fungerat utmärkt ända tills jag vill att användaren skall dirigeras om till en annan html sida om formuläret är ifylt korekt... någon som kan hjälpa mig med vad jag gjort för fel?
java script:

tacksam för svar.

Ett sätt att lösa problemet:
Sätt action="valkommen.html" på form.
Sätt onSubmit tilll "return checkFields()"

I checkfields så kör du bara return true, istället för din window.location = "valkommen.html", samt return false efter alerten.

Det går alltså att tolka som att onSubmit gör endast submit om det returneras true (då kommer man till valkommen.html) i annat fall händer ingenting.

Gällandes valideringen är det lite märkligt att man måste ange EXAKT 10 tecken för lösenordet, eller? Borde även tillåta alla möjliga tecken där.

Visa signatur

ηλί, ηλί, λαμά σαβαχθανί!?

Permalänk
Medlem

Prova:
<input type="button" name="skicka" id="skicka" value="Bli medlem" onClick="checkFields()"/>
Istället för:
<input type="submit" name="skicka" id="skicka" value="Bli medlem" />

Permalänk
Medlem
Skrivet av Andez:

Hej.
sitter och fnular med en hemsida där jag har ett formulär med java script allt har fungerat utmärkt ända tills jag vill att användaren skall dirigeras om till en annan html sida om formuläret är ifylt korekt... någon som kan hjälpa mig med vad jag gjort för fel?
java script:

<script> <!--funktionen checkFields kontrollerar att alla fälten som måste vara ifylda är ifylda samt att dem fält som skall vara identiska är identiska--> function checkFields() { missinginfo = ""; if ((document.Bli_medlem.Email.value == "") || (document.Bli_medlem.Email.value.indexOf('@') == -1) || (document.Bli_medlem.Email.value.indexOf('.') == -1)) { missinginfo += "\n - Epostadress"; } if (document.Bli_medlem.Email.value != document.Bli_medlem.Email2.value) { missinginfo += "\n - Epostadresserna stämmer inte överens"; } if (document.Bli_medlem.Personnummer.value == "") { missinginfo += "\n - Personnummer"; } if (document.Bli_medlem.Förnamn.value == "") { missinginfo += "\n - Förnamn"; } if (document.Bli_medlem.Efternamn.value == "") { missinginfo += "\n - Efternamn"; } if (document.Bli_medlem.Adress.value == "") { missinginfo += "\n - Adress"; } if (document.Bli_medlem.Postnummer.value == "") { missinginfo += "\n - Postnummer"; } if (document.Bli_medlem.Postort.value == "") { missinginfo += "\n - Postort"; } if (document.Bli_medlem.Mobilnummer.value == "") { missinginfo += "\n - Mobiltelefonnummer"; } if (document.Bli_medlem.Password.value == "") { missinginfo += "\n - Lösenord"; } if (document.Bli_medlem.Password.value != document.Bli_medlem.Password2.value) { missinginfo += "\n - Lösenorden stämmer inte överens"; } if (missinginfo != "") { missinginfo ="_____________________________\n" + "Du har inte fyllt i fälten:\n" + missinginfo + "\n_____________________________" + "\nFyll i de angivna fälten innan du skickar formuläret!"; alert(missinginfo); } else { window.location = "valkommen.html"; } } </script>

html kod:

<section id="member"> <form id="Bli_medlem" name="Bli_medlem" method="post" enctype="text/plain" onSubmit="checkFields();" action=""> <p>Epostadress:<br> <input type="Email" name="Email" id="Email" placeholder="Email"> obligatoriskt</p> <p>Upprepa epostadress:<br> <input type="Email" name="Email2" id="Email2" placeholder="Email"> obligatoriskt</p> <p>Personnummer:<br> <input type="text" name="Personnummer" id="Personnummer" placeholder="YYYY-MM-DD-XXXX" pattern="\d{4}\s?\d{2}\s?\d{2}\s?\d{4}"> obligatoriskt</p> <p>Förnamn:<br> <input type="text" name="Förnamn" id="Förnamn" placeholder="Förnamn"> obligatoriskt</p> <p>Efternamn:<br> <input type="text" name="Efternamn" id="Efternamn" placeholder="Efternamn"> obligatoriskt</p> <p>Adress:<br> <input type="text" name="Adress" id="Adress" placeholder="Adress"> obligatoriskt</p> <p>Postnummer:<br> <input type="text" name="Postnummer" placeholder="Postnummer" pattern="\d{3}\s?\d{2}"> obligatoriskt</p> <p>Postort:<br> <input type="text" name="Postort" id="Postort" placeholder="Postort"> obligatoriskt</p> <p>Telefonnummer:<br> <input type="text" name="Telefonnummer" id="Telefonnummer" placeholder="Telefonnummer"></p> <p>Mobiltelefonnummer:<br> <input type="text" name="Mobilnummer" id="Mobilnummer" placeholder="Mobilnummer" pattern="\d{4}\s?\d{2}\s?\d{2}\s?\d{2}"> obligatoriskt</p> <p>Lösenord (10 tecken A-Z a-z 0-9):<br> <input type="Password" name="Password" id="Password" placeholder="Password" pattern="[A-Za-z0-9]{10}"> obligatoriskt</p> <p>Upprepa lösenord:<br> <input type="Password" name="Password2" id="Password2" placeholder="Password"> obligatoriskt</p> <input type="submit" name="skicka" id="skicka" value="Bli medlem" /> <input type="button" value="Avbryt" onClick="location.href='Home.html'"> </form> </section>

tacksam för svar.

Annars kan du ju bara sätta

<input type="text" name="textruta" id="textruta" required> <!-- "required" stoppar formuläret om textruta inte är ifylld-->

På så sätt behöver du bara göra jämförelsen.

Skickades från m.sweclockers.com

Visa signatur

| EVGA Z170 FTW | i7 6700k | ASUS RTX 3070 | 16GB DDR4 3200MHz | Cooler Master V850 | Samsung 840 Evo 250GB + 2x WD Black 500GB + Seagate 2TB SSHD + Samsung 970 Evo M.2 500GB |

Permalänk
Medlem

Delar av koden går även att skriva lite kortare då du har samma felhantering på många av fälten.

<!--funktionen checkFields kontrollerar att alla fälten som måste vara ifylda är ifylda samt att dem fält som skall vara identiska är identiska--> function checkField(key){ var val = document.Bli_medlem[key].value; if(val == "" /*|| val.length < 2 maybe additional error checking ? */){ return "\n - " + key; } } function checkFields() { missinginfo = ""; if ((document.Bli_medlem.Email.value == "") || (document.Bli_medlem.Email.value.indexOf('@') == -1) || (document.Bli_medlem.Email.value.indexOf('.') == -1)) { missinginfo += "\n - Epostadress"; } if (document.Bli_medlem.Email.value != document.Bli_medlem.Email2.value) { missinginfo += "\n - Epostadresserna stämmer inte överens"; } var keys = ["Personnummer","Förnamn","Efternamn","Adress","Postnummer","Postort","Mobiltelefonnummer","Lösenord"]; var len = keys.length; for(var i = 0; i < len; i++){ missingInfo += checkField(keys[i]); } /* if (document.Bli_medlem.Personnummer.value == "") { missinginfo += "\n - Personnummer"; } if (document.Bli_medlem.Förnamn.value == "") { missinginfo += "\n - Förnamn"; } if (document.Bli_medlem.Efternamn.value == "") { missinginfo += "\n - Efternamn"; } if (document.Bli_medlem.Adress.value == "") { missinginfo += "\n - Adress"; } if (document.Bli_medlem.Postnummer.value == "") { missinginfo += "\n - Postnummer"; } if (document.Bli_medlem.Postort.value == "") { missinginfo += "\n - Postort"; } if (document.Bli_medlem.Mobilnummer.value == "") { missinginfo += "\n - Mobiltelefonnummer"; } if (document.Bli_medlem.Password.value == "") { missinginfo += "\n - Lösenord"; } */ if (document.Bli_medlem.Password.value != document.Bli_medlem.Password2.value) { missinginfo += "\n - Lösenorden stämmer inte överens"; } if (missinginfo != "") { missinginfo = "_____________________________\n" + "Du har inte fyllt i fälten:\n" + missinginfo + "\n_____________________________" + "\nFyll i de angivna fälten innan du skickar formuläret!"; alert(missinginfo); } else { window.location = "valkommen.html"; } } </script>

Permalänk
Medlem
Skrivet av BrutalSwede:

Annars kan du ju bara sätta

<input type="text" name="textruta" id="textruta" required> <!-- "required" stoppar formuläret om textruta inte är ifylld-->

På så sätt behöver du bara göra jämförelsen.

Skickades från m.sweclockers.com

Tror man enligt standarder hålla sig till

required="required"

Sen kan man väl påpeka att formulärkontroller på klientsidan är ganska lönlöst. Men för att lära sig så visst

Visa signatur

i7-6700K | MSI Z170A | MSI 1080 8GB | 16GB Kingston HyperX | Intel 600P 256GB | Samsung EVO Basic 840 250GB x2 raid 0 | Corsair RM 750W | 3 x Dell U2414H

Permalänk
Avstängd
Skrivet av gn1p:

Tror man enligt standarder hålla sig till

required="required"

Sen kan man väl påpeka att formulärkontroller på klientsidan är ganska lönlöst. Men för att lära sig så visst

En modern site måste ha både client och server validation

Visa signatur
Permalänk
Medlem
Skrivet av Leedow:

Ett sätt att lösa problemet:
Sätt action="valkommen.html" på form.
Sätt onSubmit tilll "return checkFields()"

I checkfields så kör du bara return true, istället för din window.location = "valkommen.html", samt return false efter alerten.

Det går alltså att tolka som att onSubmit gör endast submit om det returneras true (då kommer man till valkommen.html) i annat fall händer ingenting.

Gällandes valideringen är det lite märkligt att man måste ange EXAKT 10 tecken för lösenordet, eller? Borde även tillåta alla möjliga tecken där.

supertack jag har suttit och ändrat vridit och vänt på det men inte fått till det. jag vet att allt inte är optimalt men detta är första gången jag använder Java script på en hemsida.

gällande lösenordet hur skulle jag kunna skriva koden för att acceptera t.ex. ett lösenord på 6-20 tecken eller liknande? har testat lite olika metoder men inte lyckats så jag bestämde mig helt enkelt för att ge upp och låta lösenordet vara en bestämd läng men lär mig gärna hur jag kan förbetträ

Visa signatur

Dator 1 : Ace Ecco 420 Midi Tower : Ace RawDeal Plus 520W PSU : 2st 120 mm fläkt på sidan : 1st 80 mm fläkt fram : MSI 770-C45 AM3 socket : AMD Phenom II x6 3,3/3,7 MHz : Radeon HD 6770 1GB : 12GB Ram (CL7 och CL9) : BR/DVD : Terateck Aureon 5.1 Ljudkort : SSD 125GB + 500GB + 1TB HDD : Windows 7 64-bit

Permalänk
Medlem
Skrivet av Andez:

supertack jag har suttit och ändrat vridit och vänt på det men inte fått till det. jag vet att allt inte är optimalt men detta är första gången jag använder Java script på en hemsida.

gällande lösenordet hur skulle jag kunna skriva koden för att acceptera t.ex. ett lösenord på 6-20 tecken eller liknande? har testat lite olika metoder men inte lyckats så jag bestämde mig helt enkelt för att ge upp och låta lösenordet vara en bestämd läng men lär mig gärna hur jag kan förbetträ

Personligen tycker jag inte att det ska finnas någon direkt begränsning för lösenord. Eventuellt krav på minimum och maximum, men man ska nog ta i med maximum.
Varför hindra någon från att använda ett riktigt bra lösenord?

Din befintliga regular expression tillåter endast tecken mellan A-Z a-Z 0-9 samt att det exakt 10 tecken.
Det ser ut på detta vis just nu: [A-Za-z0-9]{10}
Om du vill göra exempelvis 6-20 så skriver du: [A-Za-z0-9]{6,20}
Om du vill tillåta alla tecken, men minst 6 tecken och max 20 tecken, så skriver du istället: .{6,20}
Punkt (.) betyder "vilket tecken som helst förutom ny rad eller slut på rad"
Uttrycken som används är regular expressions. Googla på det så får du mer gottsaker.

Tänk på att din validering sker i javascript (klientsidan) och kan således inte antas vara korrekta värden. Du måste ändå validera detta på serversidan om du planerar att använda det och verkligen försäkra dig om att datat uppfyller dina kriterier.

Visa signatur

ηλί, ηλί, λαμά σαβαχθανί!?

Permalänk
Medlem
Skrivet av Leedow:

Personligen tycker jag inte att det ska finnas någon direkt begränsning för lösenord. Eventuellt krav på minimum och maximum, men man ska nog ta i med maximum.
Varför hindra någon från att använda ett riktigt bra lösenord?

Din befintliga regular expression tillåter endast tecken mellan A-Z a-Z 0-9 samt att det exakt 10 tecken.
Det ser ut på detta vis just nu: [A-Za-z0-9]{10}
Om du vill göra exempelvis 6-20 så skriver du: [A-Za-z0-9]{6,20}
Om du vill tillåta alla tecken, men minst 6 tecken och max 20 tecken, så skriver du istället: .{6,20}
Punkt (.) betyder "vilket tecken som helst förutom ny rad eller slut på rad"
Uttrycken som används är regular expressions. Googla på det så får du mer gottsaker.

Tänk på att din validering sker i javascript (klientsidan) och kan således inte antas vara korrekta värden. Du måste ändå validera detta på serversidan om du planerar att använda det och verkligen försäkra dig om att datat uppfyller dina kriterier.

Tack för dem svaren. läser webbutveckling 2 så uppgiften är att göra skalet till en hemsida för att i nästa kurs fortsätta med att arbeta med webbserver och sidans innehåll.

Visa signatur

Dator 1 : Ace Ecco 420 Midi Tower : Ace RawDeal Plus 520W PSU : 2st 120 mm fläkt på sidan : 1st 80 mm fläkt fram : MSI 770-C45 AM3 socket : AMD Phenom II x6 3,3/3,7 MHz : Radeon HD 6770 1GB : 12GB Ram (CL7 och CL9) : BR/DVD : Terateck Aureon 5.1 Ljudkort : SSD 125GB + 500GB + 1TB HDD : Windows 7 64-bit

Permalänk
Hedersmedlem
Skrivet av gn1p:

Tror man enligt standarder hålla sig till

required="required"

Det behövs bara i XHTML-varianter. I HTML5 är det helt OK att inte använda denna redundanta syntax för booleanska attribut [1]. Enda anledningen att den redundanta syntaxen ens är kvar är för att HTML5 är tänkt att bibehålla bakåtkompatibilitet så långt det är möjligt, men det finns alltså inga anledningar att fortsätta släpa med sig XML-stilen från XHTML-eran.

Skrivet av gn1p:

Sen kan man väl påpeka att formulärkontroller på klientsidan är ganska lönlöst. Men för att lära sig så visst

Formulärkontroller på klientsidan är till för användaren, för att snabbt kunna ge feedback, utan att det ska behövas en "rundringning" till servern för att lista ut att namnfältet var tomt och liknande. Det måste ju dock kombineras med kontroller på serversidan.

Personligen föredrar jag HTML5-valideringen genom attribut som just `required` och dess kompisar (`type`, `pattern`, …). Redan idag har egentligen alla webbläsare stöd för detta, och det kommer bara bättras med tiden, och det är därför relativt sett lätt att underhålla, jämfört med custom-javascriptlösningar. Det passar inte överallt, men för enkla saker som att ange nödvändiga fält så känns det som en bra första ansats.

Visa signatur

Nu med kortare användarnamn, men fortfarande bedövande långa inlägg.