securimage validation

hi everyone i am trying to get validate captcha on my form but i would like validation to take place on the form without a change of state.

currently the page refreshes to display the error message and the page loses all form values and i can understand that this can be frustrating to users who have to retype the information.

how can i get the error message to display right below the captcha image area? this way the user can make the necessary corrections to their mistake without re-entering everything.

<?php session_start(); 
include_once ("resources/Connections/kite.php");
include_once $_SERVER['DOCUMENT_ROOT'] . '/securimage/securimage.php';
$securimage = new Securimage();
?>

<div class="c13">
  <table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td width="69%" align="center"><p class="c6">New Account</p>
        <?php
$username = mysql_real_escape_string($_POST['username']);
$email = mysql_real_escape_string($_POST['email']);
$password = mysql_real_escape_string($_POST['password']);
$password = mysql_real_escape_string($_POST['password2']);

        //check if the form has been submitted

if(isset($_POST['submit'])){

    if ($securimage->check($_POST['captcha_code']) == false) {
  // the code was incorrect
  // you should handle the error so that the form processor doesn't continue

  // or you can use the following code if there is no validation or you do not know how
  echo "The security code entered was incorrect.<br /><br />";
  echo "Please go <a href='javascript:history.go(-1)'>back</a> and try again.";
}

else

    //success

    echo '<p class="c7">Thanks for signing up. We have just sent you an email at <b>'.$email.'</b>. Please click on the confirmation link within this message to complete registration.<br><img src="resources/img/spacer.gif" alt="" width="1" height="20"><br><span class="c12">
                          <input name="" type="button" class="c11" value="Register" onClick="location.href=\'main.php\'"/>
                    </span><br><img src="resources/img/spacer.gif" alt="" width="1" height="15"></p></div>';
    include_once ("resources/php/footer.php");      
exit;
}
?>
        <p class="c7">Just enter your details to get started</p>
        <div class="c10">
          <form action="<?php echo $PHP_SELF;?>" method="post" id="register" name="register">
            <table width="100%" border="0" cellpadding="0" cellspacing="">
              <tr>
                <td colspan="3" class="c8" height="25px" valign="bottom">Username</td>
              </tr>
              <tr>
                <td width="46%"></td>
                <td width="46%"></td>
                <td width="54%" class="c8"></td>
              </tr>
              <tr>
                <td colspan="3" class="c8"><span id="sprytextfield2">
                  <input name="username" type="text" class="required"/>
                  <span class="textfieldRequiredMsg">A value is required.</span><span class="textfieldMaxCharsMsg">Exceeded maximum number of characters.</span></span></td>
              </tr>
              <tr>
                <td colspan="3" class="c8" height="25px" valign="bottom">Email</td>
              </tr>
              <tr>
                <td></td>
                <td></td>
                <td class="c8"></td>
              </tr>
              <tr>
                <td colspan="3" class="c8"><span id="sprytextfield3">
                  <input name="email" type="text" class="required"/>
                  <span class="textfieldRequiredMsg">A value is required.</span><span class="textfieldMaxCharsMsg">Exceeded maximum number of characters.</span><span class="textfieldInvalidFormatMsg">Invalid format.</span></span></td>
              </tr>
              <tr>
                <td></td>
                <td></td>
              </tr>
              <tr>
                <td colspan="3" class="c8" height="25px" valign="bottom">Password (minimum of 8 characters)</td>
              </tr>
              <tr>
                <td></td>
                <td></td>
                <td class="c8"></td>
              </tr>
              <tr>
                <td colspan="3" class="c8"><span id="sprytextfield4">
                  <input name="password" type="password" class="required" id="password"/>
                  <span class="textfieldRequiredMsg">A value is required.</span><span class="textfieldMinCharsMsg">Minimum number of characters not met.</span><span class="textfieldMaxCharsMsg">Exceeded maximum number of characters.</span></span></td>
              </tr>
              <tr>
                <td colspan="3" class="c8" height="25px" valign="bottom">Confirm Password</td>
              </tr>
              <tr>
                <td></td>
                <td></td>
                <td class="c8"></td>
              </tr>
              <tr>
                <td colspan="3" class="c8"><span id="spryconfirm1">
                  <input name="password2" type="password" class="required"/>
                  <span class="confirmRequiredMsg">A value is required.</span><span class="confirmInvalidMsg">The values don't match.</span></span></td>
              </tr>
              <tr>
                <td colspan="3" class="c8" height="25px" valign="bottom">Enter Code</td>
              </tr>
              <tr>
                <td colspan="3" class="c8"><img id="captcha" src="resources/securimage/securimage_show.php" alt="CAPTCHA Image" />&nbs开发者_高级运维p; </td>
              </tr>
              <tr>
                <td colspan="3" class="c8"><input type="text" name="captcha_code" size="10" maxlength="6" />
                  <a href="#" onclick="document.getElementById('captcha').src = 'resources/securimage/securimage_show.php?' + Math.random(); return false">Swap image</a></td>
              </tr>
              <tr>
                <td colspan="3" class="c8"><span class="c12"><img src="resources/img/spacer.gif" width="1" height="40" alt="" /></span></td>
              </tr>
              <tr>
                <td colspan="3" class="c8"><span class="c12">
                  <input name="submit" type="submit" class="c11" value="Continue"/>
                  </span></td>
              </tr>
            </table>
          </form>
        </div>
        <br /></td>
      <td width="31%" valign="middle" align="center">&nbsp;</td>
    </tr>
  </table>
</div>

---

The values that the user has entered are being sent also so why not access them and put them into the fields should there be an error

<input name="username" type="text" class="required" value="<?php echo $username ?>"/>

This will put whatever the user entered into the fields for you. Of course you need to setup all the relevant error checking.