Javascript - en nybörjare ber om hjälp

2009-10-31, 17:05 #13

Medlem

Reg: Nov 2007

Inlägg: 3 978

det bör kanske inte stå
<form enctype="text/plain" method= post

utan

<form method="post" name="f" action="">

Citera

2009-10-31, 19:43 #14

Medlem

Reg: Aug 2006

Inlägg: 871

Kod:


/* --- KAN MAN GÖRA SÅ HÄR MED E-MAILVALIDERING? --- */

    if (!document.f.email.value.return !!this.match(/^([a-zA-Z0-9]{1}([a-zA-Z0-9\.\-\_]*)[a-zA-Z0-9]{1})@([a-zA-Z0-9]{1}([a-zA-Z0-9\.\-\_]*)[a-zA-Z0-9]{1})\.([a-zA-Z]{2,4})$/)) {

        alert("Du måste fylla i en korrekt E-mail adress.");

        document.f.eMail.focus();

        return false;

För det 0-te ser det ut som du försöker returnera något inifrån if-satsen. Antagligen klippte du bara in koden från den tidigare funktionen som tilldelades String.prototype? I if-satsen skall du bara jämföra saker så att satsen kan sägas vara sann eller falsk.

För det första heter det eMail i formuläret, inte email. Det finns lite andra skiftlägesproblem också, t.ex. password/passWord.

För det andra så är det ju formulärets eMail.value du vill köra .match på (om det finns), inte "this".

Alltså:
if (!document.f.eMail.value || !!document.f.eMail.match( [your stuff here ])) {
// do complain stuff
}

För det tredje så heter det "repeatPassword" i formuläret, men du kollar också efter något som skall heta "validatePassword". Det blir ju också fel.

Kör hårt! Hoppas att det känns som att det går framåt.
/P

PS.
Vilken skola är det du läser distansutbildningen på?
DS.

__________________
Senast redigerad av Povel 2009-10-31 kl. 19:48.

Citera

2009-10-31, 20:13 #15

Medlem

Reg: Jun 2006

Inlägg: 2 003

Citat:

Ursprungligen postat av sanobub

Så här ser det ut nu (förhoppningsvis mer lättläst):

Absolut inte. Varför använder du inte bara forumets PHP- eller CODE-taggar? Se hur det blir när andra postar kod. Gör så du med.

Citera

2009-11-01, 09:02 #16

Medlem

Reg: Maj 2009

Inlägg: 41

Citat:

Ursprungligen postat av Povel

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

Nej, jag tittade inte där eftersom jag trodde att du bara citerade farty där

Ska kolla nu.

Citera

2009-11-01, 09:29 #17

Medlem

Reg: Maj 2009

Inlägg: 41

Citat:

Ursprungligen postat av Povel

Kod:


/* --- KAN MAN GÖRA SÅ HÄR MED E-MAILVALIDERING? --- */

    if (!document.f.email.value.return !!this.match(/^([a-zA-Z0-9]{1}([a-zA-Z0-9\.\-\_]*)[a-zA-Z0-9]{1})@([a-zA-Z0-9]{1}([a-zA-Z0-9\.\-\_]*)[a-zA-Z0-9]{1})\.([a-zA-Z]{2,4})$/)) {

        alert("Du måste fylla i en korrekt E-mail adress.");

        document.f.eMail.focus();

        return false;

För det 0-te ser det ut som du försöker returnera något inifrån if-satsen. Antagligen klippte du bara in koden från den tidigare funktionen som tilldelades String.prototype? I if-satsen skall du bara jämföra saker så att satsen kan sägas vara sann eller falsk.

För det första heter det eMail i formuläret, inte email. Det finns lite andra skiftlägesproblem också, t.ex. password/passWord.

För det andra så är det ju formulärets eMail.value du vill köra .match på (om det finns), inte "this".

Alltså:
if (!document.f.eMail.value || !!document.f.eMail.match( [your stuff here ])) {
// do complain stuff
}

För det tredje så heter det "repeatPassword" i formuläret, men du kollar också efter något som skall heta "validatePassword". Det blir ju också fel.

Kör hårt! Hoppas att det känns som att det går framåt.
/P

PS.
Vilken skola är det du läser distansutbildningen på?
DS.

Ja, det går väl framåt, fast långsamt. Jag har mycket nytta av dina kommentarer, liksom Sweetiepie's. Tack! Jag läser på Mittuniversitetet.

Citera

2009-11-01, 10:38 #18

Medlem

Reg: Maj 2009

Inlägg: 41

Hej och hå, så här ser det ut nu:

HTML-kod:

<head>

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

function validateForm()(theForm)
{

  if (document.f.firstName.value == "")
  {
    alert("Du måste ange ett förnamn.");
    document.f.firstName.focus();
    return (false);
  }

	else if (document.f.firstName.value.length>20)
	{
	alert("Förnamnet får bestå av max 20 tecken.");
	document.f.firstName.focus();
	return false;
	} 	

  if (document.f.lastName.value == "")
  {
    alert("Du måste ange ett efternamn.");
    document.f.lastName.focus();
    return (false);
  }
 
	else if (document.f.lastName.value.length>20)
	{
	alert("Efternamnet får bestå av max 20 tecken.");
	document.f.lastName.focus();
	return false;
	} 	

  if (document.f.age.value == "")
  {
    alert("Du måste ange en ålder.");
    document.f.age.focus();
    return (false);
  }

	if (length<=18 || length>=45) {}
	{
        alert("Du måste inneha en ålder mellan 18-45 år.");
	document.f.age.focus();
        return false;
	} 

  if (document.f.userName.value == "")
  {
    alert("Du måste ange ett användarnamn.");
    document.f.userName.focus();
    return (false);
  }

	else if (document.f.userName.value.length>10)
	{
	alert("Användarnamnet får bestå av max 10 tecken.");
	document.f.userName.focus();
	return false;
	} 

  if (document.f.password.value == "")
  {
    alert("Du måste ange ett lösenord");
    document.f.password.focus();
    return (false);
  }
				
	if (length<=6 || length>=10) {} 
	{
	alert("Lösenordet måste vara 6-10 tecken.");
	document.f.password.focus();
	return false;
	}

  if (document.f.repeatPassword.value == "")
  {
    alert("Du måste repetera lösenordet");
    document.f.repeatPassword.focus();
    return (false);
  }

	else if (document.f.repeatPassword.value==password)  
	{
	alert("Du måste upprepa lösenordet exakt likadant.");
	document.f.repeatPassword.focus();
	return false;
	}

  if (document.f.eMail.value == "")
  {
    alert("Du måste ange en e-postadress.");
    document.f.eMail.focus();
    return (false);
  }
				
	if (!document.f.eMail.value || !!document.f.eMail.match(/^[-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;)) 
	{
	alert("Du måste fylla i en korrekt e-postadress.");
	document.f.eMail.focus();
	return false;
	} 
else

  function MsgBox (textstring) 
  {

  alert("Ditt medlemskap har registrerats.");
  return true;
  }

  return (true);
}

//--></script>

</head>

<body>

<form 
  method="post" 
  name="f" 
  action=""
  onSubmit="return validateForm(this)" "return functionMsgbox(this)" 
  >

    <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>
				
    <input type=submit value="Sänd" 

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

</form>

</body>
</html>

Koden är uppenbarligen inte korrekt än, eftersom formuläret inte funkar när jag testar *klurar vidare*

Citera

2009-11-01, 13:49 #19

Medlem

Reg: Jul 2009

Inlägg: 17

Jag är inte så duktig på javascript - men herregud, din html kod är bedrövlig.

jag föreslår att du går in på validator.w3.org och validerar din sida..

några småsaker

Ingen <html> tag (säkert bara fel på kopieringen, men trots det.
ingen doctype
om du skapar en tabell så måste du stänga <td> taggen innan du stänger <tr> taggen
Citat:
<input type=submit value="Sänd"

du måste stänga alla taggar. (förövrigt borde väl även input taggar stängas med /> [samt omslutas med en paragraf eller dyligt {kan ha fel på den punkten, eller om det är xhtml sm kräver det}])

sen en fråga på javascripten:

Citat:

Kod:


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

  {

    alert("Du måste ange en ålder.");

    document.f.age.focus();

    return (false);

  }



    if (length<=18 || length>=45) {}

    {

        alert("Du måste inneha en ålder mellan 18-45 år.");

    document.f.age.focus();

        return false;

    }

vad är length i detta tillfälle. Kan vara jag som inte kan javascript - men det verkar som du inte definerat den... (och om du skulle ha defnerat den, det är väl inte "längden" som ska vara längre än 18 och mindre än 45 utan värdet??). (detta med bara lenght har du använt på flera ställen)

men framförallt - VALIDERA HTML! då kommer allt bli mycket enklare

Citera

2009-11-01, 14:07 #20

Medlem

Reg: Aug 2006

Inlägg: 871

1:

Kod:


function validateForm()(theForm) { /*code*/ }

Så deklarerar man inte en funktion som tar ett argument som heter theForm
Så här skall det se ut:

Kod:


function validateForm (theForm) { /*code*/ }

2:
När du deklarerar funktionen MsgBox så gör du det inuti funktionen validateForm. Det finns ingen bra anledning till det här. Dessutom får den en parameter textstring, som inte används. Och till sist så returnerar den alltid true, vilket är rätt meningslöst.
Fixandet av allt detta skulle leda till en separat funktion (utanför validateForm) som skulle se mer ut så här:

Kod:


function MsgBox (textstring)  {

  alert(textstring);

}

.. viket bara är alert av en text, som man ju lika gärna kan göra utan en separat funktion:

Kod:


alert('Ditt medlemskap har registrerats.');

// Detta är ju den enda texten som alertas nånstans, vad jag har kunnat se

3:

Kod:


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

Nu sitter "onsubmit" på formuläret, vilket är rätt. Men onsubmit i det här faller blir bara "return validateForm(this)".
Det inom det andra citationstecknen-paret är helt orelaterat. onsubmit kan endast ha ett värde så att säga.
Vill du kalla på MsgBox-funktionen så måste du

stava rätt ("MsgBox", inte "Msgbox")
inte skriva "function" innan. Det gör man när man deklarerar (skapar) funktionen, inte när man använder den.
skicka med en textsträng som du vill ha alertad. "this" kommer inte att vara något du vill ha alertat här. "this" är själva formuläret (se nedan).
kalla på den från ett ställe där det GÅR att kalla på funktioner: Tex. i onsubmithandlern, eller i en annan funktion.

En idé skulle vara att kalla på den i onsubmit om valideringen går bra:

Kod:


onsubmit="if (validateForm(this)) {MsgBox('Ditt medlemskap har registrerats.');return true;} else {return false;}"

En annan idé är att kalla på den sist i validateForm, om allt har gått ok. Då får man tänka på följande när det gäller onsubmit: returnerar du false i den, kommer formuläret inte att skickas. Det är därför man returnerar false när man t.ex. upptäckt felifyllda fält. Returnerar man true skickas formulärdatat till det som står i form-taggens action-attribut, t.ex. så här:

Kod:


<form action="formHandler.jsp" onsubmit="return validateForm(this);">

<!-- Om validateForm returnerar true skickas data till formHandler.jsp, annars skickas inget. -->

Därför måste man i "idé 2-fallet" se till att returnera false om nåt är fel, eller köra MsgBox('Ditt medlemskap har registerats.') och returnera true om allt såg bra ut.

4:
Om du fixat punkt 1, så tar funktionen validateForm emot en parameter som heter theForm. När man i onsubmit på form-taggen kallar på validateForm och skickar med "this", så kan man ju fråga sig vad "this" är. Det är just själva formuläret, det! Hade man skickat med "this" från en submitknapp hade det varit knappen som skickats med. Ok?
Eftersom du skickar med formuläret in i funktionen så hamnar den i parametern theForm, och därför kan du använda den överallt där du skriver document.f. Så här:

Kod:


if (!theForm.lastName.value) { /*complain*/ } else if (theForm.lastName.value.length>20) { /*complain length*/ }

Det är en ganska bra idé att göra så här, inte minst eftersom det gör det lätt att byta namn på formuläret (man behöver inte ändra en massa rader i funktionen, eftersom man helt enkelt skickat med formuläret. Det behöver inte ens ha ett namn!)

Hoppas att detta hjälper! Risigt av skolan om de lämnat er vind för våg så att säga.

Hälsningar
/Povel

__________________
Senast redigerad av Povel 2009-11-01 kl. 14:10.

Citera

2009-11-01, 14:59 #21

Moderator

Reg: Feb 2008

Inlägg: 17 194

Citat:

Ursprungligen postat av sanobub

Ja, det går väl framåt, fast långsamt. Jag har mycket nytta av dina kommentarer, liksom Sweetiepie's. Tack! Jag läser på Mittuniversitetet.

Med tanke på hur dina små kodexempel sett ut hittills kan man ju gissa på att det är en viss Håkansson som lärt er koda javascript och html

Citera

2009-11-01, 21:06 #22

Medlem

Reg: Maj 2009

Inlägg: 41

fifth-edition: Min nuvarande html-kod har jag tagit från källkoden till ett Registrera medlemskap-formulär jag hittat på nätet. Det var den enklaste av alla jag tittat på. Har du javascript-frågor är inte jag rätt person att fråga (läs ts), du får väl fråga i forumet om du undrar något

Povel: Åh, jättebra hjälp igen, tack! Jag har åtgärdat punkterna 1-3, och om jag förstår dig rätt så är det snyggare att göra som du föreslår i punkt 4 men inte nödvändigt? I nuläget har jag bara tid att få det att funka, elegant kod får komma i en senare kurs

Proton: Nej, Håkansson har inte med den här kursen att göra. Om du läser ts så ser du att vi inte fått någon som helst undervisning i javascript och html. Koden är ett hopkok av sådant jag hittat i diverse tutorials, forum och olika sidors källkod.

Citera

2009-11-01, 22:38 #23

Moderator

Reg: Feb 2008

Inlägg: 17 194

Efter lite surfning i minnesbanorna hos mej själv och efter lite surfning på nätet har jag kommit fram till att "the power of booleans" är applicerbart även på onSubmit-events.

Vad detta i praktiken innebär är att om man har två (eller fler) javascript som man vill kunna köra för att göra olika valideringar på sitt formulär är en sådan här konstruktion fullt godtagbar med under förutsättning att valideringsfunktionerna returnerar antingen true eller false(beroende på om valideringen lyckades eller inte såklart)

Kod:


<form method="post" action="someaction.jsp" onSubmit="return firstValidation(this) && secondValidation(this)">

<!--form controls-->

</form>

Vilket enligt enkel boolesk algebra kommer ge slutreultatet att uttrycket blir sant om bägge valideringarna returnerar true. Hjälpte det, eller blev det bara ännu snurrigare?

Citera

2009-11-02, 12:33 #24

Medlem

Reg: Maj 2009

Inlägg: 41

Citat:

Ursprungligen postat av Proton

Efter lite surfning i minnesbanorna hos mej själv och efter lite surfning på nätet har jag kommit fram till att "the power of booleans" är applicerbart även på onSubmit-events.

Vad detta i praktiken innebär är att om man har två (eller fler) javascript som man vill kunna köra för att göra olika valideringar på sitt formulär är en sådan här konstruktion fullt godtagbar med under förutsättning att valideringsfunktionerna returnerar antingen true eller false(beroende på om valideringen lyckades eller inte såklart)

Kod:


<form method="post" action="someaction.jsp" onSubmit="return firstValidation(this) && secondValidation(this)">

<!--form controls-->

</form>

Vilket enligt enkel boolesk algebra kommer ge slutreultatet att uttrycket blir sant om bägge valideringarna returnerar true. Hjälpte det, eller blev det bara ännu snurrigare?

Eh... snurrigare, får jag erkänna. Är det något du tycker är nödvändigt att ändra i min kod eller bara något som också skulle kunna funka?

Citera

Javascript - en nybörjare ber om hjälp

Skapa ett konto eller logga in för att kommentera

Skapa ett konto

Logga in