Things move around and change after signing up?

pappakaka · February 11, 2011

Ok so now i have almost finished my registration page but i have this odd problem..

I could explain it but i'll show you a picture instead so you understand better..

This is before and after pictures when i click sign up.

As you can see, when you click sign up, all the form fields and the sign up button (wich isn't even in this file and uses a different css doc) change. Also there is a big invisible layer ontop of the page after you have clicked sign up so you cant use anything as you can see in picture 5. Any ideas what the problem can be?

Here is my code aswell:

HTML form:

<?php
session_start();

if(isset($_POST['register']))
{
  include_once('classes/class.register.php');

  $register = new Register();

  if($register->process())
    echo "Successfully Signed Up!";
  else
    $register->show_errors();
}

$token = $_SESSION['token'] = md5(uniqid(mt_rand(),true));
?>



<!doctype html>
<html>
<head>

<link rel="stylesheet" type="text/css" href="css/main.css">
<link rel="stylesheet" type="text/css" href="css/register.css">
<script type="text/javascript" src="js/passwordmeter.js"></script>

</head>
<body>

<script src="jquery.js"></script>

<div class="center">

			<!-- PHP -->
	<?php require("html/menu.inc"); ?>
	<?php require("html/layout.inc"); ?>
	<?php require("html/login.inc"); ?>
			<!-- PHP -->

	<div class="register">
	<header>Sign Up Now!</header>
	<form method="POST" action="<?php echo $_SERVER['PHP_SELF'];?>">
		<ul>
			<li>
				<label for="username">* Username: </label><br />
				<input name="username" class="rusernamefield" type="text" value="<?php echo $username; ?>"></input>
			</li>
			<li>
				<label for="first_name">* First Name: </label><br />
				<input name="first_name" class="rfirstnamefield" type="text" value="<?php echo $first_name; ?>"></input>
			</li>
			<li>
				<label for="last_name">Last Name: </label><br />
				<input name="last_name" class="rlastnamefield" type="text" value="<?php echo $last_name; ?>"></input>
			</li>
			<li>
				<label for="password">* Password: </label><br />
				<input type="password" name="password" class="rpasswordfield" onkeyup='password_strength(this.value)'></input>
			</li>

			<div id="password_strength_border">
				<div id="password_strength" class="strength0"></div>
			</div>

			<li>
				<label for="email">* Email Address: </label><br />
				<input name="email" class="remail" type="email" placeholder="email@address.com" value="<?php echo $email; ?>"></input>
			</li>
			<li>
				<label for="confemail">* Confirm Email Address: </label><br />
				<input name="confemail" class="rconfirmemail" type="email" placeholder="email@address.com" value="<?php echo $confemail; ?>"></input>
			</li>
			<li>
				<label for="gender">* Gender: </label><br />
				<select name="gender">
					<option selected="selected" disabled="disabled">Choose</option>
					<option value="Man">Man</option>
					<option value="Woman">Woman</option>
				</select>
			</li>
			<li>
				<label for="birth_month">* Birth Day: </label><br />
				<select name="birth_month">
					<option disabled="disabled" selected="selected">Month</option>
					<option value="01">January</option>
					<option value="02">February</option>
					<option value="03">March</option>
					<option value="04">April</option>
					<option value="05">May</option>
					<option value="06">June</option>
					<option value="07">July</option>
					<option value="08">August</option>
					<option value="09">September</option>
					<option value="10">October</option>
					<option value="11">November</option>
					<option value="12">December</option>
				</select>
				<select name="birth_day">
					<option disabled="disabled" selected="selected">Day</option>
					<option value="01">1</option>
					<option value="02">2</option>
					<option value="03">3</option>
					<option value="04">4</option>
					<option value="05">5</option>
					<option value="06">6</option>
					<option value="07">7</option>
					<option value="08">8</option>
					<option value="09">9</option>
					<option value="10">10</option>
					<option value="11">11</option>
					<option value="12">12</option>
					<option value="13">13</option>
					<option value="14">14</option>
					<option value="15">15</option>
					<option value="16">16</option>
					<option value="17">17</option>
					<option value="18">18</option>
					<option value="19">19</option>
					<option value="20">20</option>
					<option value="21">21</option>
					<option value="22">22</option>
					<option value="23">23</option>
					<option value="24">24</option>
					<option value="25">25</option>
					<option value="26">26</option>
					<option value="27">27</option>
					<option value="28">28</option>
					<option value="29">29</option>
					<option value="30">30</option>
					<option value="31">31</option>
				</select>
				<select name="birth_year">
					<option disabled="disabled" selected="selected">Year</option>
					<option value="2011">2011</option>
					<option value="2010">2010</option>
					<option value="2009">2009</option>
					<option value="2008">2008</option>
					<option value="2007">2007</option>
					<option value="2006">2006</option>
					<option value="2005">2005</option>
					<option value="2004">2004</option>
					<option value="2003">2003</option>
					<option value="2002">2002</option>
					<option value="2001">2001</option>
					<option value="2000">2000</option>
					<option value="1999">1999</option>
					<option value="1998">1998</option>
					<option value="1997">1997</option>
					<option value="1996">1996</option>
					<option value="1995">1995</option>
					<option value="1994">1994</option>
					<option value="1993">1993</option>
					<option value="1992">1992</option>
					<option value="1991">1991</option>
					<option value="1990">1990</option>
					<option value="1989">1989</option>
					<option value="1988">1988</option>
					<option value="1987">1987</option>
					<option value="1986">1986</option>
					<option value="1985">1985</option>
					<option value="1984">1984</option>
					<option value="1983">1983</option>
					<option value="1982">1982</option>
					<option value="1981">1981</option>
					<option value="1980">1980</option>
					<option value="1979">1979</option>
					<option value="1978">1978</option>
					<option value="1977">1977</option>
					<option value="1976">1976</option>
					<option value="1975">1975</option>
					<option value="1974">1974</option>
					<option value="1973">1973</option>
					<option value="1972">1972</option>
					<option value="1971">1971</option>
					<option value="1970">1970</option>
					<option value="1969">1969</option>
					<option value="1968">1968</option>
					<option value="1967">1967</option>
					<option value="1966">1966</option>
					<option value="1965">1965</option>
					<option value="1964">1964</option>
					<option value="1963">1963</option>
					<option value="1962">1962</option>
					<option value="1961">1961</option>
					<option value="1960">1960</option>
					<option value="1959">1959</option>
					<option value="1958">1958</option>
					<option value="1957">1957</option>
					<option value="1956">1956</option>
					<option value="1955">1955</option>
					<option value="1954">1954</option>
					<option value="1953">1953</option>
					<option value="1952">1952</option>
					<option value="1951">1951</option>
					<option value="1950">1950</option>
					<option value="1949">1949</option>
					<option value="1948">1948</option>
					<option value="1947">1947</option>
					<option value="1946">1946</option>
					<option value="1945">1945</option>
					<option value="1944">1944</option>
					<option value="1943">1943</option>
					<option value="1942">1942</option>
					<option value="1941">1941</option>
					<option value="1940">1940</option>
					<option value="1939">1939</option>
					<option value="1938">1938</option>
					<option value="1937">1937</option>
					<option value="1936">1936</option>
					<option value="1935">1935</option>
					<option value="1934">1934</option>
					<option value="1933">1933</option>
					<option value="1932">1932</option>
					<option value="1931">1931</option>
					<option value="1930">1930</option>
					<option value="1929">1929</option>
					<option value="1928">1928</option>
					<option value="1927">1927</option>
					<option value="1926">1926</option>
					<option value="1925">1925</option>
					<option value="1924">1924</option>
					<option value="1923">1923</option>
					<option value="1922">1922</option>
					<option value="1921">1921</option>
					<option value="1920">1920</option>
					<option value="1919">1919</option>
					<option value="1918">1918</option>
					<option value="1917">1917</option>
					<option value="1916">1916</option>
					<option value="1915">1915</option>
					<option value="1914">1914</option>
					<option value="1913">1913</option>
					<option value="1912">1912</option>
					<option value="1911">1911</option>
					<option value="1910">1910</option>
					<option value="1909">1909</option>
					<option value="1908">1908</option>
					<option value="1907">1907</option>
					<option value="1906">1906</option>
					<option value="1905">1905</option>
					<option value="1904">1904</option>
					<option value="1903">1903</option>
					<option value="1902">1902</option>
					<option value="1901">1901</option>
					<option value="1900">1900</option>
				</select>
			</li>
			<li>
				<label for="iagree" class="iagreetext">*  I Agree to the <a href="#">Privacy Policy</a> and <a href="#">Terms of Use</a></label>
				<input name="iagree" type="checkbox" class="iagreebox"></input>
			</li>
			<input name="register" class="registerbutton" type="submit" value="Sign Up"></input>
			<p class="fieldsmarked">Fields marked with an (*) is required</p>
			<input type="hidden" name="token" value="<?php echo $token;?>"/>
		</ul>
	</form>
	</div>

</div>

</body>
</html>

PHP code to validate and process form:

<?php

if ($_SERVER['REQUEST_METHOD'] == "POST") {
     $username    = isset($_POST['username'])?$_POST['username']:'';
 $first_name  = isset($_POST['first_name'])?$_POST['first_name']:'';
 $last_name   = isset($_POST['last_name'])?$_POST['last_name']:'';
 $email       = isset($_POST['email'])?$_POST['email']:'';
 $confemail   = isset($_POST['confemail'])?$_POST['confemail']:'';
 $gender      = isset($_POST['gender'])?$_POST['gender']:'';
 $birth_month = isset($_POST['birth_month'])?$_POST['birth_month']:'';
 $birth_day   = isset($_POST['birth_day'])?$_POST['birth_day']:'';
 $birth_year  = isset($_POST['birth_year'])?$_POST['birth_year']:'';
     }

   $username    = htmlspecialchars($username, ENT_QUOTES);
   $first_name  = htmlspecialchars($first_name, ENT_QUOTES);
   $last_name   = htmlspecialchars($last_name, ENT_QUOTES);
   $email       = htmlspecialchars($email, ENT_QUOTES);
   $confemail   = htmlspecialchars($confemail, ENT_QUOTES);
   $gender      = htmlspecialchars($gender, ENT_QUOTES);
   $birth_month = htmlspecialchars($birth_month, ENT_QUOTES);
   $birth_day   = htmlspecialchars($birth_day, ENT_QUOTES);
   $birth_year  = htmlspecialchars($birth_year, ENT_QUOTES);

class Register
{
  private $username;
  private $first_name;
  private $last_name;
  private $password;
  private $passmd5;
  private $email;
  private $confemail;
  private $gender;
  private $birth_month;
  private $birth_day;
  private $birth_year;
  private $iagree;

  private $errors;
  private $token;

  public function __construct()
  {
    $this->errors = array();

    $this->username     = $this->filter($_POST['username']);
$this->first_name   = $this->filter($_POST['first_name']);
$this->last_name    = $this->filter($_POST['last_name']);
    $this->password     = $this->filter($_POST['password']);
    $this->email        = $this->filter($_POST['email']);
$this->confemail    = $this->filter($_POST['confemail']);
$this->gender       = $this->filter($_POST['gender']);
$this->birth_month  = $this->filter($_POST['birth_month']);
$this->birth_day    = $this->filter($_POST['birth_day']);
$this->birth_year   = $this->filter($_POST['birth_year']);
$this->iagree       = $this->filter($_POST['iagree']);
    $this->token        = $_POST['token'];

    $this->passmd5      = md5($this->password);
  }

  public function process()
  {
    if($this->valid_token() && $this->valid_data())
         $this->register();

    return count($this->errors)? 0 : 1;
  }

  public function filter($var)
  {
    return preg_replace('/[^a-zA-Z0-9@.]/','',$var);
  }

  public function register()
  {
   mysql_connect("localhost","root","") or die(mysql_error());
   mysql_select_db("membership") or die (mysql_error());

   $sql = "INSERT INTO users(username,password,first_name,last_name,email,gender,birth_month,birth_day,birth_year) VALUES ('{$this->username}','{$this->passmd5}','{$this->first_name}','{$this->last_name}','{$this->email}','{$this->gender}','{$this->birth_month}','{$this->birth_day}','{$this->birth_year}')";
mysql_query($sql) or die(mysql_error());

   if(mysql_affected_rows()< 1)
     $this->errors[] = "Could Not Process Form";
  }

  public function user_exists()
  {
    mysql_connect("localhost","root","") or die(mysql_error());
    mysql_select_db("membership") or die (mysql_error());

    $data = mysql_query("SELECT username FROM users WHERE username = '{$this->username}'");

    return mysql_num_rows($data) > 0 ? 1 : 0;
  }

  public function show_errors()
  {

    foreach($this->errors as $key=>$value)
      echo "<div class=errormessages> 
				$value
		</div>
		<br />";
  }

  public function valid_data()
  {
    if ($this->user_exists()){
      $this->errors[] = 'The username is already taken, choose another one!';
      }
if (empty($this->username)){
      $this->errors[] = 'You must enter a username!';
  }
if (empty($this->first_name)){
      $this->errors[] = 'You must enter your first name';
  }
  
    if (empty($this->password)){
      $this->errors[] = 'You must enter a password!';
  }
elseif (strlen($this->password) < 6){
  $this->errors[] = 'Your password must be longer than 6 characters!';
  }

    if (empty($this->email)){
      $this->errors[] = 'You must enter an email address!';
  }
elseif (!preg_match('/^[a-zA-Z0-9._-]+@[a-zA-Z0-9._-]+\.[a-zA-Z]{2,4}$/',$this->email)){
  $this->errors[] = 'You must enter a valid email address!';
  }
elseif ($this->email != $this->confemail){
  $this->errors[] = 'The email addresses you entered did not match!';
  }
  
if (empty($this->gender)){
  $this->errors[] = 'Choose your gender!';
  }
if (empty($this->birth_month)){
      $this->errors[] = 'Select which month you were born!';
  }
if (empty($this->birth_day)){
      $this->errors[] = 'Select which day you were born!';
  }
if (empty($this->birth_year)){
      $this->errors[] = 'Select which year you were born!';
  }
if (empty($this->iagree)){
  $this->errors[] = 'You must agree to the <a href="#">Privacy Policy</a> and <a href="#">Terms of Use</a> to sign up!';
  }

  return count($this->errors)? 0 : 1;
  }


  public function valid_token()
  {
   if(!isset($_SESSION['token']) || $this->token != $_SESSION['token'])
     $this->errors[] = "Invalid Submission";

   return count($this->errors)? 0 : 1;
  }
}

?>

BlueSkyIS · February 11, 2011

only way to tell is to view the HTML source and compare before and after; validate the HTML of both, and see what changed from one to the other.

pappakaka · February 11, 2011

Ok, now i've validated the page on WC3's website and the few warnings i get about things like "you can't use the placeholder= attribute etc." are the same befora and after and has nothing to do with the problem as i took them away and there was no change to the website.

I think the problem has something to do with how i show my errors messages cause, when i took away the code inside the "show_errors" function the problem dissapeared? Maybe there is a better way to show the messages like in a text field or something? Ideas?

lastkarrde · February 11, 2011

Do what BlueSkyIS said.

View (and copy and save) the HTML and CSS source of the page before and after registration. Then run each before and after through a diff program. Then you'll be able to see exactly what the difference was and whats causing the problem.

pappakaka · February 11, 2011

Do what BlueSkyIS said.

View (and copy and save) the HTML and CSS source of the page before and after registration. Then run each before and after through a diff program. Then you'll be able to see exactly what the difference was and whats causing the problem.

Ok, now i've validated the page on WC3's website

Thats what i did, i tried a Diff Program (WinMerge) as you said too but the same result, there is no difference in the HTML document before and after..I don't know what too do..

Pikachu2000 · February 11, 2011

Did you do the same with the CSS?

[ot]Using <form action="<php echo $_SERVER['PHP_SELF']; ?>" as a form action attribute presents a known XSS vulnerability. To submit a form to itself, simply use <form action=""[/ot]

pappakaka · February 11, 2011

Did you do the same with the CSS?

[ot]Using <form action="<php echo $_SERVER['PHP_SELF']; ?>" as a form action attribute presents a known XSS vulnerability. To submit a form to itself, simply use <form action=""[/ot]

Yes, same result. Nothing different.. It has to be the PHP that resets the fields to it's default or something?

Oh, thanks for that form action= thingy!

Sign In

Things move around and change after signing up?

Recommended Posts

pappakaka

Link to comment

Share on other sites

BlueSkyIS

Link to comment

Share on other sites

pappakaka

Link to comment

Share on other sites

lastkarrde

Link to comment

Share on other sites

pappakaka

Link to comment

Share on other sites

Pikachu2000

Link to comment

Share on other sites

pappakaka

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information