Javascript - en nybörjare ber om hjälp

2009-10-30, 12:27 #1

Medlem

Reg: May 2009

Inlägg: 41

Jag läser till systemvetare på distans och just nu håller vi på med Javascript. Lärarna har förklarat att de pga en planeringsmiss på institutionen inte har tid med föreläsningar och knappt med handledning. Dåligt med tanke på att det är en universitetsutbildning, men så är det. Jag har hittills klarat mig på diverse tutorials på nätet.

Nu till mitt problem: Uppgiften går ut på att göra ett formulär för att registrera medlemskap. Varje inmatning i textboxarna ska valideras när användaren trycker på Lägg till-knappen. Om någon textbox är fel ifylld ska ett felmeddelande visas (efter labeln ovanför aktuell textbox tänkte jag mig). Om allt är rätt ifyllt vill jag att en messagebox ska visas som berättar för användaren att medlemskapet har registrerats. Det kvittar var informationen hamnar när man tryckt på Lägg till, det är inte det uppgiften går ut på.Det här är säkert busenkelt när man vet hur man gör men jag har kört fast och fattar inte vad jag gör fel.

Jag antar att jag behöver skriva något mer för att felmeddelandena ska visas, samt något mer för att få onSubmit att funka. Sen har jag säkert missat något ytterligare *trött*

Mycket tacksam om någon vill hjälpa mig!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="sv" http-equiv="Content-Language" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Registrera medlemskap</title>
<style type="text/css">
.style1 {
margin-bottom: 0px;
}
</style>
</head>

<SCRIPT language="JavaScript">

</SCRIPT>

<body>

<div id="layer1" style="position: absolute; width: 786px; height: 640px; z-index: 1; left: 10px; top: 7px">
<div id="layer2" class="style1" style="position: absolute; width: 375px; height: 40px; z-index: 1; left: 3px; top: 1px">
<h1><label id="Label1">Registrera medlemskap</label></h1>
</div>
<div id="layer3" style="position: absolute; width: 426px; height: 17px; z-index: 2; left: 5px; top: 51px">
<h4><label id="Label2">Förnamn (max 20 tkn)</label></h4>

</div>
<div id="layer4" style="position: absolute; width: 342px; height: 32px; z-index: 3; left: 3px; top: 92px">

<form method="post" name="firstName">
<input name="firstName" style="width: 229px" type="text" /></form>

</div>
<div id="layer5" style="position: absolute; width: 422px; height: 19px; z-index: 4; left: 4px; top: 123px">
<h4><label id="Label3">Efternamn (max 20 tkn)</label></h4>
</div>
<div id="layer6" style="position: absolute; width: 341px; height: 32px; z-index: 5; left: 2px; top: 165px">
<form method="post" name="lastName">

<input name="lastName" style="width: 228px" type="text" /></form>

</div>
<div id="layer7" style="position: absolute; width: 426px; height: 19px; z-index: 6; left: 5px; top: 198px">
<h4><label id="Label4"> Ålder (18-45 år)</label></h4>
</div>
<div id="layer8" style="position: absolute; width: 355px; height: 30px; z-index: 7; left: 3px; top: 246px">
<form method="post" name="age">

<input name="age" type="text" /></form>

</div>
<div id="layer9" style="position: absolute; width: 443px; height: 19px; z-index: 8; left: 4px; top: 275px">
<h4><label id="Label5">Användarnamn (max 10 tkn)</label></h4>
</div>
<div id="layer10" style="position: absolute; width: 339px; height: 26px; z-index: 9; left: -1px; top: 316px">
<form method="post" name="userName">

<input name="userName" style="width: 222px" type="text" /></form>

</div>
<div id="layer11" style="position: absolute; width: 443px; height: 16px; z-index: 10; left: 2px; top: 346px; right: 341px">
<h4><label id="Label6">Lösenord (6-10 tkn)</label></h4>
</div>
<div id="layer12" style="position: absolute; width: 342px; height: 27px; z-index: 11; left: 3px; top: 386px">
<form method="post" name="password">

<input name="password" style="width: 203px" type="text" /></form>

</div>
<div id="layer13" style="position: absolute; width: 443px; height: 15px; z-index: 12; left: 3px; top: 437px">
<h4><label id="Label7">Bekräfta lösenord</label></h4>
</div>
<div id="layer14" style="position: absolute; width: 352px; height: 27px; z-index: 13; left: 5px; top: 479px">
<form method="post" name="validatePassword">

<input name="validatePassword" style="width: 201px" type="text" /></form>

</div>
<div id="layer15" style="position: absolute; width: 441px; height: 17px; z-index: 14; left: 5px; top: 506px">
<h4><label id="Label8">E-postadress</label></h4>
</div>
<div id="layer16" style="position: absolute; width: 349px; height: 26px; z-index: 15; left: 3px; top: 549px">
<form method="post" name="email">
<input name="email" style="width: 237px" type="text" /></form>

</div>
<div id="layer17" style="position: absolute; width: 132px; height: 47px; z-index: 16; left: 3px; top: 581px">
<form method="post" name="buttonAdd">
<input name="buttonAdd" style="width: 85px" type="submit" value="Lägg till" onSubmit="return validateForm(this)" "return functionMsgbox(this)" /></form>
</div>

</div>

</body>

</html>

Citera

2009-10-30, 19:38 #2

Medlem

Reg: Aug 2006

Inlägg: 866

Hej!

Har du prövat att validera sidan? Dess HTML är rätt mysko, är jag rädd.
Och varför har du en och en halv miljard formulär på sidan? Använd ett (1) formulär med alla dina inputs, selects etc inuti.

Fortsätt sen, så har du en mycket bättre spelplan att jobba på.

/P

Citera

2009-10-30, 20:53 #3

Moderator

Reg: Feb 2008

Inlägg: 16 646

För att inte tala om att sidan blir betydligt mer läsbar om du använder CODE eller PHP-taggarna så att indenteringar behålls.

Citera

2009-10-30, 22:14 #4

Medlem

Reg: May 2009

Inlägg: 41

Citat:

Ursprungligen postat av Povel

Hej!

Har du prövat att validera sidan? Dess HTML är rätt mysko, är jag rädd.
Och varför har du en och en halv miljard formulär på sidan? Använd ett (1) formulär med alla dina inputs, selects etc inuti.

Fortsätt sen, så har du en mycket bättre spelplan att jobba på.

/P

Först tyckte jag inte ditt inlägg var till någon hjälp på min nivå, men nu har jag tack vare det lärt mig göra tabell som jag lagt formuläret i. Dock funkar resten lika dåligt. Html-biten är inte det viktiga till den här uppgiften, så på ett sätt har jag lagt tid på det i onödan men jag får se det som att det alltid är nyttigt att lära sig något nytt.

Min enda räddning nu verkar vara källkod för andra medlemsformulär.

Citera

2009-10-30, 22:16 #5

Medlem

Reg: May 2009

Inlägg: 41

Citat:

Ursprungligen postat av Proton

För att inte tala om att sidan blir betydligt mer läsbar om du använder CODE eller PHP-taggarna så att indenteringar behålls.

Det har du helt rätt i, och jag är medveten om det. Dock är det inte det mitt problem handlar om.

Citera

2009-10-30, 22:26 #6

Medlem

Reg: Jul 2006

Inlägg: 470

Citat:

Ursprungligen postat av sanobub

Det har du helt rätt i, och jag är medveten om det. Dock är det inte det mitt problem handlar om.

Dock blir det ditt problem eftersom ingen vill läsa kod som inte är indenterad, således kommer 99% inte att orka läsa igenom koden

Citera

2009-10-31, 02:15 #7

Moderator

Reg: Feb 2008

Inlägg: 16 646

Citat:

Ursprungligen postat av ångmaskin

Dock blir det ditt problem eftersom ingen vill läsa kod som inte är indenterad, således kommer 99% inte att orka läsa igenom koden

Alldeles riktigt.

När du nu har städat upp lite i din HTML, kan du inte ta och posta den här då så kan vi kika igenom den? Känns som om det inte är så jättesvårt problem det här rent spontant, men eftersom din HTML inte gick att läsa så funderade jag inte så mkt på problemet....

Citera

2009-10-31, 03:54 #8

Medlem

Reg: Sep 2009

Inlägg: 28

Jag började fila lite på nåt exempel åt TS, men så här ett par timmar senare så tror jag minsann att jag byggde den ultimata javascript-valideringen istället. Den här är fan så perfekt den kan bli tror jag. Copy-o pasta och testa själva:

Kod:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>FU</title>

    <style type="text/css">

        fieldset {

            padding: 10px;

        }

        fieldset legend {

            margin-bottom: 10px;

            font-size: larger;

        }

        fieldset label {

            float: left;

            width: 150px;

        }

        fieldset .error-message {

            color: #ff0000;

        }

    </style>

    <script type="text/javascript">

        var bits = [];

        bits["FirstName"] = 1;

        bits["LastName"] = 2;

        bits["Age"] = 4;

        bits["UserName"] = 8;

        bits["Password"] = 16;

        bits["ConfirmPassword"] = 32;

        bits["Email"] = 64;



        function ValidateRegistrationForm() {

            // Nollställ felmeddelanden

            ClearErrors();

            // Antag att allt är OK från början

            var ok = true; 

            // Kolla att alla fält är ifyllda

            var res = 0;

            var tot = bits["FirstName"] + bits["LastName"] + bits["Age"] + bits["UserName"] + bits["Password"] + bits["ConfirmPassword"] + bits["Email"];

            res += tot & CheckEmptyField("FirstName", "Fyll i ett förnamn");

            res += tot & CheckEmptyField("LastName", "Fyll i ett efternamn");

            res += tot & CheckEmptyField("Age", "Fyll i en ålder");

            res += tot & CheckEmptyField("UserName", "Fyll i ett användarnamn");

            res += tot & CheckEmptyField("Password", "Fyll i ett lösenord");

            res += tot & CheckEmptyField("ConfirmPassword", "Bekräfta ditt lösenord");

            res += tot & CheckEmptyField("Email", "Fyll i en epostadress");

            if ((res & tot) != tot) ok = false; // något ovan missade validering

            // Kolla max-längder

            res = 0;

            tot = bits["FirstName"] + bits["LastName"] + bits["UserName"] + bits["Password"];

            res += tot & CheckFieldValueLength("FirstName", 1, 20, "Förnamnet får vara max 20 tecken");

            res += tot & CheckFieldValueLength("LastName", 1, 20, "Efternamnet får vara max 20 tecken");

            res += tot & CheckFieldValueLength("UserName", 1, 10, "Användarenamnet får vara max 10 tecken");

            res += tot & CheckFieldValueLength("Password", 6, 10, "Lösenordet måste vara 6 - 10 tecken");

            if ((res & tot) != tot) ok = false; 

            // Kolla ålder

            res = 0;

            tot = bits["Age"];

            res += tot & CheckFieldValueNumberBetween("Age", 18, 45, "Du måste vara mellan 18 - 45 för att få joina.");

            if ((res & tot) != tot) ok = false;

            // Kolla matchande pw's

            res = 0;

            tot = bits["Password"] + bits["ConfirmPassword"];

            res += tot & CheckMatchingPasswords("Password", "ConfirmPassword", "Du måste upprepa lösenordet likadant.");

            if ((res & tot) != tot) ok = false;

            // Kolla email

            res = 0;

            tot = bits["Email"];

            res += tot & CheckIsValidEmail("Email", "Du måste fylla i en korrekt emailadress.");

            if ((res & tot) != tot) ok = false;

            if (ok) // alert() här bara för demosyfte eftersom vi submit:ar till ingenstans

                alert("Allt är OK ifyllt!");

            return ok;

        }

        

        function CheckEmptyField(fieldId, errorMessage) {

            if (document.getElementById(fieldId).value.length == 0) {

                SetFieldError(fieldId + "_Error", errorMessage);

                return 0;

            }

            return bits[fieldId];

        }



        function CheckFieldValueLength(fieldId, minLength, maxLength, errorMessage) {

            var vlen = document.getElementById(fieldId).value.length;

            if (vlen < minLength ||vlen > maxLength) {

                SetFieldError(fieldId + "_Error", errorMessage);

                return 0;

            }

            return bits[fieldId];

        }

        

        function CheckFieldValueNumberBetween(fieldId, minValue, maxValue, errorMessage) {

            var v = document.getElementById(fieldId).value;

            if ((isNaN(v)) || (v < minValue || v > maxValue)) {

                SetFieldError(fieldId + "_Error", errorMessage);

                return 0;

            }

            return bits[fieldId];

        }

        

        function CheckMatchingPasswords(pwFieldId, confirmPwFieldId, errorMessage) {

            var v1 = document.getElementById(pwFieldId).value;

            var v2 = document.getElementById(confirmPwFieldId).value;

            if (v1 != v2) {

                SetFieldError(confirmPwFieldId + "_Error", errorMessage);

                return 0;

            }

            return bits[pwFieldId] + bits[confirmPwFieldId];

        }



        function CheckIsValidEmail(emailFieldId, errorMessage) {

            var v = document.getElementById(emailFieldId).value;

            // Jag tog ett annat regex för det ville inte funka med det TS hade,

            // var säkert mitt fel men detta regex är nog bättre i alla fall

            var re = /^[-a-z0-9~!$%^&*_=+}{\'?]+(\.[-a-z0-9~!$%^&*_=+}{\'?]+)*@([a-z0-9_][-a-z0-9_]*(\.[-a-z0-9_]+)*\.(aero|arpa|biz|com|coop|edu|gov|info|int|mil|museum|name|net|org|pro|travel|mobi|[a-z][a-z])|([0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}))(:[0-9]{1,5})?$/i;

            if (!re.test(v)) {

                SetFieldError(emailFieldId + "_Error", errorMessage);

                return 0;

            }

            return bits[emailFieldId];

        }

        

        function ClearErrors() {

            SetFieldError("FirstName_Error", "", true);

            SetFieldError("LastName_Error", "", true);

            SetFieldError("Age_Error", "", true);

            SetFieldError("UserName_Error", "", true);

            SetFieldError("Password_Error", "", true);

            SetFieldError("ConfirmPassword_Error", "", true);

            SetFieldError("Email_Error", "", true);

        }



        function SetFieldError(fieldErrorLabelId, message, overwrite) {

            if (arguments.length < 3) overwrite = false;

            var fieldErrorLabel = document.getElementById(fieldErrorLabelId);

            if (fieldErrorLabel == null) {

                alert("Error label with id '" + fieldErrorLabelId + "' not found.");

                return false;

            }

            // overwrite är till för att clear:a errors

            // eftersom alla errors kontrolleras varje gång ValidateRegistrationForm körs

            // så vill vi inte skriva över första felet om det inte är en clear

            if (fieldErrorLabel.innerHTML == "" || overwrite)

                fieldErrorLabel.innerHTML = message;

            return true;

        }

    </script>

</head>

<body>

    <form method="post" id="regform" action="somepage" onsubmit="return ValidateRegistrationForm();">

        <div>

            <fieldset>

                <legend>Regga</legend>

                <label for="FirstName">Förnamn:</label>

                <input type="text" id="FirstName" name="FirstName" />

                <span class="error-message" id="FirstName_Error"></span>

                <br />

                <label for="LastName">Efternamn:</label>

                <input type="text" id="LastName" name="LastName" />

                <span class="error-message" id="LastName_Error"></span>

                <br />

                <label for="Age">Ålder:</label>

                <input type="text" id="Age" name="Age" size="2" />

                <span class="error-message" id="Age_Error"></span>

                <br />

                <label for="UserName">Användarnamn:</label>

                <input type="text" id="UserName" name="UserName" />

                <span class="error-message" id="UserName_Error"></span>

                <br />

                <label for="Password">Lösenord:</label>

                <input type="password" id="Password" name="Password" />

                <span class="error-message" id="Password_Error"></span>

                <br />

                <label for="ConfirmPassword">Bekräfta lösenord:</label>

                <input type="password" id="ConfirmPassword" name="ConfirmPassword" />

                <span class="error-message" id="ConfirmPassword_Error"></span>

                <br />

                <label for="Email">Email:</label>

                <input type="text" id="Email" name="Email" />

                <span class="error-message" id="Email_Error"></span>

                <br />

                <input type="submit" value="Lägg till" />

            </fieldset>

        </div>

    </form>

</body>

</html>

Citera

2009-10-31, 11:13 #9

Medlem

Reg: Aug 2006

Inlägg: 866

Jag bröt ryggen av mig och ögnade igenom koden med våld.

Ta inte illa upp, men det finns en del att fixa!

Kod:


1:

// Q: "FUNKAR DETTA!?" (flera likanande ställen)

else (document.myForm.password.value.length<=6 >=10) {



// A: Nej det funkar inte. skriv istället likt:

// if (length<=6 || length>=10) {}





2:

// slutet på den långa else-if-kedjan är helt enkelt felnavlad, blocken är fel

// (det saknas måsvingar). Dessutom kan det inte ske någon alert utan att du ANROPAR

// funktionen. Här görs det bara ett försök att definiera den, men det omgivande

// är fucked up, blockwise:

else {

    function MsgBox (textstring) {

        alert("Ditt medlemskap har registrerats.");

        return true;

    }

else return true;

}

// Ja, det görs något mystiskt anropsförsök i en "onsubmit", mer om det nedan





3:

// Detta är riktigt skumt. Onsubmit skall såklart sitta på FORMULÄRET, inte på knappen.

// (en knapp klickar man på. Ett formulär submittar man).

// Dessutom kan man bara returnera en sak från onsubmit"handlern", inte två. Det ser ut som

// det tros att man kan stapla return-värden (validateForm och Msgbox) på varandra på nåt sätt.



onSubmit="return validateForm(this)" "return functionMsgbox(this)"

// Allt vad en onsubmit skall göra skriver man inom ETT par citationstecken





// Dessutom är functionMsgbox ihopskrivet...men...

// ..dessutom skall man inte ens skriva "function" när man anropar en funktion!

<input name="buttonAdd" style="width: 85px" type="submit" value="L&auml;gg till" onSubmit="return validateForm(this)" "return functionMsgbox(this)" />

// Du måste göra ett samlat anrop till någon funktion som returnerar false om något är fel (email eller resten av formuläret)

// och sätta in det så här, i formuläret:

// onsubmit="return checkYourStuff();"





4:

// Mer om detta: onSubmit="return validateForm(this)" "return functionMsgbox(this)"

// I de jättekonstiga anropen till din validateForm och functionMsgbox skickar du med "this", vilket kommer att vara elementet

// som din onsubmit sitter i (alltså i ditt fall en knapp, men som borde vara formuläret). Men de används inte alls av dina funktioner.

// validateForm tar inget argument, Msgbox tar emot en textsträng (alltså vare sig ett formulär eller en knapp).

// Eftersom du i din validateForm söker upp formulär själv kan du ju skippa detta medskickande. Eller om du gör som jag tycker att man

// borde (använda EN formtag för formuläret): skicka med this från en onsubmit som sitter på <form>-taggen, och väl i funktionen: sök dina element nedåt i den medskickade formen.





5:

// Du har som sagt jättemånga <form>-taggar av någon anledning, varav åtminstone en inte är stängd. Invalid HTML helt enkelt.





6:

// Kommentaren till funktionen du tilldelar till String.prototype.isValidEmail

// är lite off, eftersom den egentligen inte har något att göra med något som

// "fyllts i", utan ger javascriptsträngar en ny metod som kollar om strängen den

// anropas på är "valid email" (enligt vad funktionen tycker, då)

/*validering att det är en e-mailadress som fyllts i*/





7:

// Skriv inte

<SCRIPT language="JavaScript">

// Skriv:

<script type="text/javascript">





8:

// tom sträng, dvs '', evalueras i javascript till false

// Därför är det lite elegantare att kolla:

// if (!pw) {// no no!}

// istället för det ideliga

// if (document.f.validatePassword.value=="") {}

Citera

2009-10-31, 11:48 #10

Medlem

Reg: Nov 2007

Inlägg: 3 978

Lite kommentarer som kanske får det att börja fungera.

1. <form method="post" name="firstName">
Du startar ett nytt formulär för varje input-fält vilket är felaktigt.
Du ska ha 1 <form>-tagg som börjar framför det första input-fältet och slutar längst ner och innesluter din Submit-knapp.

2. Lite standardfel. "<SCRIPT language="JavaScript">" Ska skrivas: <script type="text/javascript"> och onSubmit ska skrivas onsubmit.

3. Om din huvudform är döpt till "f" ( name="f" ) så ska du då skriva i javascriptet:

if (document.f.firstName.value=="")

tror jag. Du har missat "document." på de flesta raderna.

4. Använd Firefox och installera Firebug som har bra inbyggd JavaScript validering, annars kan du inte se vad som är fel i koden.

Citera

2009-10-31, 13:19 #11

Medlem

Reg: May 2009

Inlägg: 41

Så där, nu har jag installerat firebug och jobbat lite mer med koden. Så här ser det ut nu (förhoppningsvis mer lättläst):

<html>
<head>

</head>

<body>

<script type="text/javascript"></script>

<form enctype="text/plain" method= post

<table>
<tr>
<td>

<font size=5><strong>Registrera medlemskap</strong></font size><br><br>

Förnamn (max 20 tkn)<br> <input type=text name="firstName" size=15
maxlength=20><br>

Efternamn (max 20 tkn)<br> <input type=text name="lastName" size=15
maxlength=20><br>

Ålder (18-45)<br> <input type=text name="age" size=15
maxlength=20><br>

Användarnamn (max 10 tkn)<br> <input type=text name="userName" size=15
maxlength=10><br>

Lösenord (6-10 tkn)<br> <input type=text name="password" size=15
maxlength=10><br>

Upprepa lösenord<br> <input type=text name="repeatPassword" size=15
maxlength=10><br>

E-post<br> <input type=text name="eMail" size=30
maxlength=50><br><br><br>
/* --- KAN MAN LÄGGA TVÅ ONSUBMIT-FUNKTIONER EFTER VARANDRA SÅ HÄR? --- */
<input type=submit value="Sänd" onsubmit="return validateForm(document)", function MsgBox (textstring)>

</tr>
</td>
</table>
</form>

</body>
</html>

Jag har inte kollat fartys kod än, men ska om det inte var den Povel bröt ryggen över

.

Citera

2009-10-31, 14:50 #12

Medlem

Reg: Aug 2006

Inlägg: 866

Citat:

Ursprungligen postat av sanobub

/* --- KAN MAN LÄGGA TVÅ ONSUBMIT-FUNKTIONER EFTER VARANDRA SÅ HÄR? --- */
<input type=submit value="Sänd" onsubmit="return validateForm(document)", function MsgBox (textstring)>

Nej det kan man inte. Läste du det som stod i spoilern i mitt inlägg tro?

ha dessutom onsubmit="return validateStuff();" på <form>-taggen.
Vill du absolut ha handlers på submitknappen, använd
onclick-attributet.

Det skrev jag också i mitt förra inlägg

Citera

Javascript - en nybörjare ber om hjälp

Stöd Flashback