Custom Error Messages

walda · November 28, 2011

Hello,

Im a php newbie an I got problem. I have this form:

After validating the information from form ECHO shows an error like Username taken or Account created.

How can I make the echo message look like this?

I think there is just some condition before the DIV class="error_msg" but no one worked yet.

Thank you for helping me.

I include sorce code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></meta>
        <link href="style/index_default.css" media="all" rel="Stylesheet" type="text/css" />
        <script type="text/javascript" src="js/script.js"></script>
        <title></title>
    </head>
    
    <body>
        <div class="buttons">
            <ul>
                <li><a href="index.php">HOME</a></li>
                <li><a href="about.php">ABOUT</a></li>
                <li><a href="login.php">LOGIN</a></li>
                <li><a href="sign.php" class="buttons_selected">SIGN IN</a></li>
            </ul>
        </div>
        
        <div class="error_msg">
            Username taken
        </div>
        
        <div class="middle">
            <h3>Complete the sign in, please.</h3>
                <form method="post" action="sign.php" name="sign" class="sign" onsubmit="return control_sign();">
                    <p class="content" align="center">
                        <label for="usr">Username: </label>
                            <input style="margin-left: 57px;" type="text" size="30" id="usr" name="usr" /><br /><br />
                            
                        <label for="passwd">Password: </label>
                            <input style="margin-left: 61px;" type="password" size="30" id="passwd" name="passwd" /><br /><br />
                            
                        <label for="conf_passwd">Cofirm Password: </label>
                            <input style="margin-left: 15px;" type="password" size="30" id="conf_passwd" name="conf_passwd" /><br /><br />
                            
                        <label for="email">E-mail: </label>
                            <input style="margin-left: 82px;" type="text" size="30" id="email" name="email" /><br /><br />
                        <input id="log_button" type="submit" value="SIGN IN" />
                    </p>
                </form>
        </div>
        <?php
            $link = mysql_connect("localhost", "root", "root") or die("Could not connect");
            mysql_select_db("calendar") or die("Couldn't select db");
            if (isset($_POST['usr']) && isset($_POST['passwd']) && isset($_POST['conf_passwd']) && isset($_POST['email']) && ($_POST['passwd'] == $_POST['conf_passwd']))
            {
                
                $username = mysql_real_escape_string($_POST['usr']);
                $email = mysql_real_escape_string($_POST['email']);
                $password = md5($_POST['passwd']);
                
                $result = mysql_query("SELECT user_name FROM user WHERE user_name = '".$username."'");
                if (mysql_num_rows($result))
                {
                    die("<div class=pop>Username taken</div>");    
                }
                
                mysql_query("INSERT INTO user (user_name, passwd, email) VALUES('$username', '$password', '$email')") or die (mysql_error()); 
                echo "<div class=pop>Account created</div>"; 
            }
            mysql_close($link);
        ?>
    </body>
</html>

sunfighter · November 28, 2011

This is from the html section of code you gave us.

css code would be nice.

The <div class="error_msg"> has to be hidden [done in css]

Your php does not belong here. I'd replace it with AJAX code.

We will show the error message with javascript.

So, I need css.

walda · November 28, 2011

This is just css for class error_msg. Do you need whole css code?

.error_msg {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 3px;
    text-align: center;
    width: 515px;
    background-color: #FFCCCC;
    border: 2px dashed crimson;
    line-height: 30px;
}

sunfighter · November 29, 2011

Yes all the css please after all it's the main box that's being changed.

walda · November 29, 2011

Here it is:

* {
    margin: 0;
    padding: 0;
}

body {
    width: 100%;
    font-family: Calibri, Arial, Verdana;
}

.buttons {
    margin-left: auto;
    margin-right: auto;
    margin-top: 7%;
    width: 520px;
    height: -1px;
    font-size: 19px;
}

.buttons ul {
    height: 30px;
    padding-top: 20px;
    margin-bottom: 3px;
    list-style: none;
    background-color: #2D2D2D;
    background: -moz-linear-gradient(top,  #2D2D2D,  #939393); 
    background: -o-linear-gradient(top,  #2D2D2D,  #939393);
    background: -webkit-gradient(linear, left top, left bottom, from(#2D2D2D), to(#939393));
    border-top: 10px solid #6495ED;
    border-left: 10px solid #6495ED;
    border-right: 10px solid #6495ED;
    border-bottom: 1px solid white;
    border-radius: 20px 20px 0 0;
}

.buttons ul li {
    display: inline;
    padding: 0 33px 0 33px;
}

.buttons ul li a {
    text-decoration: none;
    font-weight: bold;
    color: white;
}

.buttons ul li a:hover, .buttons_selected {
    border-top: 2px solid #6495ED;
}

.error_msg {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 3px;
    text-align: center;
    width: 515px;
    background-color: #FFCCCC;
    border: 2px dashed crimson;
    line-height: 30px;
}

.middle {
    margin-left: auto;
    margin-right: auto;
    padding: 10px;
    background-color: #2D2D2D; 
    background: -moz-linear-gradient(bottom,  #2D2D2D,  #939393); 
    background: -o-linear-gradient(bottom,  #2D2D2D,  #939393); 
    background: -webkit-gradient(linear, left bottom, left top, from(#2D2D2D), to(#939393));
    width: 480px;
    height: 350px;
    border-left: 10px solid #6495ED;
    border-right: 10px solid #6495ED;
    border-bottom: 10px solid #6495ED;
    border-radius: 0 0 20px 20px;
}

.middle a {
    color: white;
    text-decoration: none;
}

.middle a:hover {
    text-decoration: underline;
}

h3 {
    padding-left: 23px; 
}
p.content {
    padding: 23px;
    color: white;
}

.small_text {
    color: black;
    font-size: 12px;
    margin-left: 29%;
}

form.login input {
    padding: 5px;
    border: 1px solid #6495ED;
}

form.sign p.content input {
    padding: 5px;
    border: 1px solid #6495ED;
}

#log_button {
    border: 1px solid black;
    width: 80px;
    cursor: pointer;
    font-weight: bold;
}

#log_button:hover {
    background-color: #6495ED;
    color: white; 
}

.pop {
    width: 150px;
    line-height: 30px;
    background-color: white;
    border: 2px solid #6495ED;
    text-align: center;
    margin-left: 44%;
    margin-top: -5%;
    z-index: 1;
}

sunfighter · November 30, 2011

This should do what you wanted. I did make some changes to your php script and then added the $themsg to disply your errors.

You might want to expand your valuation of the email address.

And the way you check if password is entered correctly twice might need work to inform the user that they didn't match.

Your code:

<?php
$themsg = "";
if ((isset($_POST['Msoft'])) && ($_POST['Msoft'] == 'junk'))
{
$link = mysql_connect("localhost", "root", "root") or die("Could not connect");
mysql_select_db("calendar") or die("Couldn't select db");
if(($_POST["usr"] != '') && ($_POST["passwd"] != '') && ($_POST["conf_passwd"] != '') && ($_POST["email"] != '') && ($_POST['passwd'] == $_POST['conf_passwd']))
{
	$username = mysql_real_escape_string($_POST["usr"]);
	$email = mysql_real_escape_string($_POST["email"]);
	$password = md5($_POST["passwd"]);
	//$result = mysql_query("SELECT user_name FROM user WHERE user_name = '".$username."'");
	$result = mysql_query("SELECT rsn FROM clan_members WHERE rsn = '" . $username . "'");
	if(!mysql_num_rows($result))
	{
		mysql_query("INSERT INTO user (user_name, passwd, email) VALUES('$username', '$password', '$email')") or die (mysql_error());
		$themsg = "3";  // good to go...
	}else{
		$themsg = "1";  // user name...
	}
}else{
	$themsg = "2";  // 2 is fill in all...
}
}
?>

<!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" xml:lang="en" lang="en">
<head>
<title>Sign-in form</title>
<meta name="generator" content="TSW WebCoder 2010" />
<link href="style/index_default.css" media="all" rel="Stylesheet" type="text/css" />

        <script type="text/javascript" src="js/script.js"></script>
        <title></title>
    </head>

    <body>
        <div class="buttons">
            <ul>
                <li><a href="index.php">HOME</a></li>
                <li><a href="about.php">ABOUT</a></li>
                <li><a href="login.php">LOGIN</a></li>
                <li><a href="sign.php" class="buttons_selected">SIGN IN</a></li>
            </ul>
        </div>

        <?php if($themsg == "1"){
		echo '<div class="error_msg">
            Username taken
        	</div>'; }

		if($themsg == "2"){
		echo '<div class="error_msg">
            Please fill in all information
        	</div>'; }
	?>

<div class="middle">
<h3>Complete the sign in, please.</h3>
    <form method="post" action="#" id="sign" class="sign" onsubmit="return control_sign();">
<p class="content" style="text-align: center;">
<label for="usr">Username: </label>
<input style="margin-left: 57px;" type="text" size="30" id="usr" name="usr" /><br /><br />

<label for="passwd">Password: </label>
<input style="margin-left: 61px;" type="password" size="30" id="passwd" name="passwd" /><br /><br />

<label for="conf_passwd">Cofirm Password: </label>
<input style="margin-left: 15px;" type="password" size="30" id="conf_passwd" name="conf_passwd" /><br /><br />

<label for="email">E-mail: </label>
<input style="margin-left: 82px;" type="text" size="30" id="email" name="email" /><br /><br />
<input type="hidden" name="Msoft" value="junk" /><br /><br />

<input id="log_button" type="submit" value="SIGN IN" />
</p>
    </form>

</div>
<?php
if($themsg == "3")
{
echo "<br /><div class=pop>Account created</div>";
}
mysql_close($link);
?>
</body>
</html>

walda · November 30, 2011

Works PERFECTLY. Thank you very much you have my respect and many thanks

Sign In

Custom Error Messages

Recommended Posts

walda

Link to comment

Share on other sites

sunfighter

Link to comment

Share on other sites

walda

Link to comment

Share on other sites

sunfighter

Link to comment

Share on other sites

walda

Link to comment

Share on other sites

sunfighter

Link to comment

Share on other sites

walda

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information