Registreringsskjema i JavaScript.

ophylicious · 28. april 2010

Heisann!

Skal lage et registreringsskjema i JavaScript og får det egentlig ikke til i det hele tatt.

<script language=javascript>

	function verify(){
		if(document.forms[0].username.value==""){
		alert("Please enter a username in the field");
		return false;
		}else{
		return true;
		}else if(document.forms[0].email.value==""){
		alert("Please enter an e-mail adress");
		return false;
		}else{
		return true;
		}
  }
</script>

<form onSubmit="return verify()">
<dl>
   	<dt>
       	<label for="username">Username:</label>
       </dt>
	<dd>
       	<input type="text" name="username" id="username" />
       <span></span>
       </dd>    	

       <dt>
       	<label for="email">E-Mail:</label>
       </dt>
       <dd>
       	<input type="text" name="email" id="email" />
           <span></span>
       </dd>

       <dt>
       	<label for="remail">Repeat E-Mail:</label>
       </dt>
       <dd>
       	<input type="text" name"remail" id="remail" />
           <span></span>
       </dd>

       <dt>
       	<label for="password">Password:</label>
       </dt>    
       <dd>
       	<input type="text" name="password" id="password" />
           <span></span>
       </dd>

       <dt>
       	<label for="repassword"><a>Repeat Password:</a></label>
       </dt>    

       <dd>
       	<input type="text" name"repassword" id="repassword" />
           <span></span>
       </dd>
	<input type="submit" value="Submit">
</dl>
</form>

Vet ikke om funksjonen jeg har laget fungerer slik som den skal. Hvordan skal jeg gå frem?

Burde jeg lage en helt annen funksjon?

Det skal dukke opp beskjed hvis det ikke er fylt inn noe i feltene.

Når data har blitt validert på riktig måte ønsker jeg at nettleseren laster opp en logg inn side.

Regner med at det er noe ajax i bildet.

Skal sies at jeg ikke har peiling på hva jeg driver med

MailMan13 · 28. april 2010

Skriptet ditt er ikk riktig. Det et "else" staqtement skan alltid etterfølge et "if" statement, så når du sier dette så er det ikke noe en nettleser vil kunne parse:

if(...) {...}
else {...} //
else if(...) {...} //feil, else kan kun etterfølge if
else {...}
else if(...) {...}

Riktig måte vil være å la "else" alene stå til den siste "if" statementet.

if(...) {...}
else if(...) {...}
else if(...) {...}
else {...}

Nøstingen gir mer "sense" når man innser at "else if" i C-baserte syntakser er to statements. Det er bare språk som eksplisitt starter og slutter if-blokker som har et egne elseif konstruksjoner hvor en if kan etterfølges av flere elseif (ex. Basic baserte språk):

//denne
if(...) {...}
else if(...) {....}
else {...}

// er 100% ekvivalent med:
if(...) {...}
else {
   if(...) {....}
   else {...}
}

Så lar du onClick-eventet på knappen din returnere verdien av valideringen . Om et av eventene på et element returnerer false vil det ikke gå videre å utføre sin "default action", normalt for submit vil det si å ikke poste form elementet.

<input type="submit" value="Submit" onClick="return verify();">

Endret 28. april 2010 av MailMan13

ophylicious · 28. april 2010

Dette har jeg nå.

<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
  	<link rel="stylesheet" href="style.css" type="text/css" />
<script type="text/javascript" src="checkinput.js"></script>
<script type="text/javascript" src="net.js"></script>
</head>

<body>

<dl>
   	<dt>
		<label for="username">Username:</label>
	</dt>
	<dd>
		<input type="text" name="username" onkeyup="check_username(this)" />
		<br />
		<span id="err-username"></span>
	</dd>

       <dt>
       	<label for="email">E-Mail:</label>
       </dt>
       <dd>
       	<input type="text" name="email" id="email" onkeyup="check_mail(this)" />
           <br />
		<span id="err-mail"></span>
       </dd>

       <dt>
       	<label for="remail">Repeat E-Mail:</label>
       </dt>
       <dd>
       	<input type="text" name"remail" id="remail" />
           <span></span>
       </dd>

       <dt>
       	<label for="password">Password:</label>
       </dt>    
       <dd>
       	<input type="text" name="password" id="password" />
           <span></span>
       </dd>

       <dt>
       	<label for="repassword"><a>Repeat Password:</a></label>
       </dt>    

       <dd>
       	<input type="text" name"repassword" id="repassword" />
           <span></span>
       </dd>
	<input type="submit" value="submit">
</dl>

</body>
</html>

//finds element by its ID
function $(elementID) { return document.getElementById(elementID); }

//checks username
function check_username(element){
  if (element.value.length <= 2 ){
     $('err-username').innerHTML = "Your username must be at least 3 charachters long.";

 }
  else{

  }
}

//funksjon som viser alfakrøll
function check_mail(element){
if (element.indexOf("@") != -1 ) {
	$('err-mail').innerHTML = "You have entered an unvalid E-Mail adress.";
}
else{
}
}

Den første funksjonen fungerer, men den andre gjør det ikke.

Jeg skal få sjekket om teksten inneholder "@" for å se om det faktisk er en email-adresse. Hvis ikke skal den returnere noe tekst.

How to?

ophylicious · 28. april 2010

I fix...

Logg inn

Registreringsskjema i JavaScript.

Anbefalte innlegg

ophylicious

Lenke til kommentar

Videoannonse

MailMan13

Lenke til kommentar

ophylicious

Lenke til kommentar

ophylicious

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Hvem er aktive 0 medlemmer