tweaking the login form

[freddyw]

My login form works. I have no problem there. I just want it to look more professional. For instance if the user fills it in and has a password less than 6 characters, Id like it to say (in red), your password must be atleast 6 characters. Also, when the user choses an unavailable username id lile it to say: "that username is taken please chose another" at the moment is says.

 

Duplicate entry '(chosen username)' for key 1

 

my code

 

if(!function_exists('mysql_connect')) die("MySQL extension not enabled");

  //connect to mysql server
**connection details hidden**

  //find our script name
  $script = $_SERVER['PHP_SELF'];
?>
<h1>
<FONT FACE="Arial, Helvetica, Geneva"> 


<center>
user registration
</center>
</FONT>
</h1>
<?php
  //are we being posted to?
  if($_SERVER['REQUEST_METHOD'] == "POST"){
    //yes! set our variables
    
    $first_name = (isset($_POST['first_name'])) ? mysql_real_escape_string($_POST['first_name']) : '';
    $last_name = (isset($_POST['last_name'])) ? mysql_real_escape_string($_POST['last_name']) : '';
    $email = (isset($_POST['email'])) ? mysql_real_escape_string($_POST['email']) : '';
    $username = (isset($_POST['username'])) ? mysql_real_escape_string($_POST['username']) : '';
    $password = (isset($_POST['password'])) ? mysql_real_escape_string($_POST['password']) : '';
    $verify = (isset($_POST['verify'])) ? mysql_real_escape_string($_POST['verify']) : '';
    

    //verify password start
    
     if($password != $verify) {
     die ('Sorry, The passwords you entered didn\'t match<br>Please use your browsers back button to try again');
     }
    
    //verify password ends
    
    if($username != '' && $password != ''){
      //database stuff: insert a new user
      
      
      if (strlen($password) < 6) {
   $error = "Your password must be at least 6 characters long.";
   }
      
      
      $sql = "INSERT INTO user (first_name, last_name, email, username, password) VALUES('$first_name', '$last_name', '$email', '$username', '$password')";
      mysql_query($sql) or die(mysql_error());
?>
<h3>
<FONT FACE="Arial, Helvetica, Geneva">
thanks for registering.
</FONT>
</h3>
<?php
    }else{
      //they didn't fill something in
      $error = true;
    }
  }
  if(isset($error) || $_SERVER['REQUEST_METHOD'] != "POST"){
    //show the form

?>
<h4><center><FONT FACE="Arial, Helvetica, Geneva"> choose your desired username and password below</FONT></center></h4>
<?php if(isset($error)){ ?>
<span style="color: #f00;">there was an error. please make sure you enter information into all fields correctly.<br> Your password must be a minimum of 6 characters.</span>
<?php } ?>




<table width='100%' height='100%'>
<form method="post" action="<?php echo $script; ?>">
<tr><td align=center>
    <table>
    <tr><td>
    <table>
    <tr><td>
  fisrt name:</td><td><input type="text" name="first_name" />
  </td></tr>
    <tr><td>last name:</td><td><input type="text" name="last_name" />
  </td></tr>
    <tr><td>email address:</td><td><input type="text" name="email" />
  </td></tr>
    <tr><td>username:</td><td> <input type="text" name="username" />
  </td></tr>
    <tr><td>password:</td><td>  <input type="password" name="password" />
</td></tr>
    <tr><td> verify password:</td><td><input type="password" name="verify" />
   </table>
    </td></tr>
    <tr><td align=center>
  <input type="submit" value="Register" />
</table>
    </td></tr>
    </form>
    </table>

 

Most of my code is PHP, i believe (or rather, I'm told) i need javascript for this?

[haku]

You are going to need a combination of DOM manipulation and AJAX.

 

You will use DOM manipulation to read the number of characters that have been entered in the password box, and insert a message into the DOM somewhere informing them that they have not added enough characters if necessary.

 

You will need to use AJAX to make a query to the server to see if the username in question has already been used. If it has, you will then need to use DOM manipulation to insert a message informing the user that their username has been taken.

 

All of it intermediate javascripting. If you don't yet know Javascript basics, which from your post it appears you don't, start with the basics, and work your way up to what you want to do.