Am creating a login form on a website whereby am having trouble creating an alert box at the top of the form that should display error messages after server-side validation and sanitization of the user input.The problem is that when the page loads, it displays the alert-box, while I want it to display only when displaying error messages. Please assist?
HTML PART
<!DOCTYPE html>
<html>
<head>
<title>Login Form</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="form">
<span class="info">
<?php
echo
$fNameErr;
$lNameErr;
$emailErr;
?>
</span>
<br>
<ul class="tab-group">
<li class="tab active">Sign Up</li>
<li class="tab">Log In</li>
</ul>
<div class="tab-content">
<h1>Sign Up for Free</h1>
<form action="signup.php" method="post" autocomplete="off">
<div class="top-row">
<div class="field-wrap">
<label>
<span class="req"></span>
</label>
<input placeholder="Firstname*" type="text" value="<?php echo $firstname;?>" required autocomplete="off" name='firstname' />
</div>
<div class="field-wrap">
<label>
<span class="req"></span>
</label>
<input placeholder="LastName*" type="text" value="<?php echo $lastname;?>" required autocomplete="off" name='lastname' />
</div>
</div>
<div class="field-wrap">
<label>
<span class="req"></span>
</label>
<input placeholder="Email Address*" type="email" value="<?php echo $email;?>" required autocomplete="off" name='email' />
</div>
<div class="field-wrap">
<label>
<span class="req"></span>
</label>
<input placeholder="Set A Password*" type="password"required autocomplete="off" name='password'/>
</div>
<button type="submit" class="button button-block" name="register">Register</button>
</form>
</div> <!-- /form -->
</div>
</body>
</html>
style.css page
.info {
color: pink;
display: block;
text-align: center;
padding: 5px;
margin-top: -20px;
margin-bottom: 15px;
border: 1px solid red;
background: #66131c;
}
<span class="info">
<?php
echo
$fNameErr;
$lNameErr;
$emailErr;
?>
</span>
try changing this to the below. let me know how it goes
<?php
if(isset($fnameErr) || isset($lNameErr) || isset($emailErr)){
echo "<span class='info'>";
echo $fNameErr . $lNameErr . $emailErr;
echo "</span>"
}
?>
I assume that you'd only want this to display when those variables have some kind of value and they would otherwise be blank. It would be pretty easy to only output this HTML element when that is the case. Perhaps something like this:
<?php if(isset($fnameErr) || isset($lNameErr) || isset($emailErr)){
echo
"<span class='info'>"
$fNameErr;
$lNameErr;
$emailErr;
"</span>";
} ?>
<?php
if(isset($fnameErr) || isset($lNameErr) || isset($emailErr)){
echo '<span class="info">';
echo $fNameErr;
echo $lNameErr;
echo $emailErr;
echo '</span>';
}
?>
try this. If it does not work , show us your php code too
Related
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Login</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<style>
body{
font: 14px sans-serif;
}
.wrapper{
padding: 20px;
margin-left: auto;
margin-right: auto;
vertical-align:middle;
}
</style>
</head>
<body>
<div class="wrapper" style="width: 500px; margin: 0 auto; background: #000; color: #fff;">
<h2>Login</h2>
<p>Please fill in your credentials to login.</p>
<?php
if(!empty($login_err)){
echo '<div class="alert alert-danger">' . $login_err . '</div>';
}
?>
<form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="post">
<div class="form-group">
<label>Username</label>
<input type="text" name="username" class="form-control <?php echo (!empty($username_err)) ? 'is-invalid' : ''; ?>" value="<?php echo $username; ?>">
<span class="invalid-feedback"><?php echo $username_err; ?></span>
</div>
<div class="form-group">
<label>Password</label>
<input type="password" name="password" class="form-control <?php echo (!empty($password_err)) ? 'is-invalid' : ''; ?>">
<span class="invalid-feedback"><?php echo $password_err; ?></span>
</div>
<div class="form-group">
<input type="submit" class="btn btn-primary" value="Login">
</div>
<p>Don't have an account? Sign up now.</p>
</form>
</div>
</body>
</html>
I need to show my wrapper class at the center of the page. I have researched and find out some methods, but this only centered horizontally and the login form is at top of the page. Can someone show me how to use this code to show my login form at the center of page? I need horizontal and vertical center.
I have changed the css class as well. But no any changes.
I am getting the output as below,
I need to show as below,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Login</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<style>
body{
font: 14px sans-serif;
height: 100%;
}
.wrapper{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
padding: 20px;
margin-left: auto;
margin-right: auto;
vertical-align: middle;
width: 500px;
background: #000;
color: #fff;
}
</style>
</head>
<body>
<div class="wrapper" style="">
<h2>Login</h2>
<p>Please fill in your credentials to login.</p>
<form action="" method="post">
<div class="form-group">
<label>Username</label>
<input type="text" name="username" class="form-control <?php echo (!empty($username_err)) ? 'is-invalid' : ''; ?>" value="<?php echo $username; ?>">
<span class="invalid-feedback"><?php echo $username_err; ?></span>
</div>
<div class="form-group">
<label>Password</label>
<input type="password" name="password" class="form-control">
<span class="invalid-feedback"></span>
</div>
<div class="form-group">
<input type="submit" class="btn btn-primary" value="Login">
</div>
<p>Don't have an account? Sign up now.</p>
</form>
</div>
</body>
</html>
This should do it. I also removed the inline css. You should avoid this in future. I took the main information from this answer.
This is the html code that I am running
.table-header {
display: flex;
width: 100%;
}
<div class="table-header">
<div>
<h3>Balance Forwarded: <span style="text-decoration: underline;"><?php echo $total_Fwd; ?></span></h3>
<h3>Total Unpaid Balance: <span style="text-decoration: underline;"><?php echo $total_bal; ?></span></h3>
<h3>Total Interest Charged: <span style="text-decoration: underline;"><?php echo $total_Int; ?></span></h3>
</div>
<div>
<form id="send" action="file.php" target="_blank" method="post">
<input type="hidden" id="query" name=q uery value="<?php echo $sql; ?>">
<input type="hidden" id="total_fwd" name=t otal_fwd value="<?php echo $total_Fwd; ?>">
<input type="hidden" id="total_bal" name=t otal_bal value="<?php echo $total_bal; ?>">
<input type="hidden" id="total_int" name=t otal_int value="<?php echo $total_Int; ?>">
<button type="submit" class="btn btn-dark">Print</button>
</form>
</div>
</div>
However, it does not align the two child divs and looks like this as of the moment:
I want those two to be side by side using flex, thank you
Use align-items: center; you can also use gap to space them.
.table-header {
display: flex;
flex-direction: row;
align-items: center;
width: 100%;
gap: 1rem;
}
<div class="table-header">
<div>
<h3>Balance Forwarded: <span style="text-decoration: underline;"><?php echo $total_Fwd; ?></span></h3>
<h3>Total Unpaid Balance: <span style="text-decoration: underline;"><?php echo $total_bal; ?></span></h3>
<h3>Total Interest Charged: <span style="text-decoration: underline;"><?php echo $total_Int; ?></span></h3>
</div>
<div>
<form id="send" action="file.php" target="_blank" method="post">
<input type="hidden" id="query" name=q uery value="<?php echo $sql; ?>">
<input type="hidden" id="total_fwd" name=t otal_fwd value="<?php echo $total_Fwd; ?>">
<input type="hidden" id="total_bal" name=t otal_bal value="<?php echo $total_bal; ?>">
<input type="hidden" id="total_int" name=t otal_int value="<?php echo $total_Int; ?>">
<button type="submit" class="btn btn-dark">Print</button>
</form>
</div>
</div>
.table-header {
display: flex;
justify-content: 'space-between';
}
How can i change the color of the input box in red if there's an error when i hit the SUBMIT button?
<form method="post" action="" ">
<h3>Add users</h3>
<div class="form-group <?php echo (!empty($error_user) || ($error_taken)) ? 'has-error' : ''; ?>">
<strong>Username: *</strong>
<input type="text" name="username" value="<?php echo $username; ?>" />
<span class="error"><?php echo $error_user; ?></span><br/>
<span class="error"><?php echo $error_taken; ?></span><br/>
</div>
<div class="form-group <?php echo (!empty($error_name)) ? 'has-error' : ''; ?>">
<strong>Name: *</strong>
<input type="text" name="name" value="<?php echo $name; ?>" />
<span class="error"><?php echo $error_name; ?></span> <br/>
</div>
<div class="form-group <?php echo (!empty($error_pass)) ? 'has-error' : ''; ?>">
<strong>Password: *</strong>
<input type="text" name="password" value="<?php echo $password; ?>" />
<span class="error"><?php echo $error_pass; ?></span> <br/>
</div>
<input type="submit" name="submit" value="Add">
</form>
You can use simple CSS
.form-group.has-error input {
border: 1px solid red;
}
You can handle that with javascript or jquery sending POST request with ajax
and before that you can create error handling function
You have two different CSS options.
First use:
.has-error input{
border: 1px solid red;
}
.has-error .error{
color:red;
}
Second:
.has-error>input{
border: 1px solid red;
}
.has-error>.error{
color:red;
}
just apply any of the CSS and you will be fine. The second one will find input and class error just into the class has-error. If there will be another <div> covering them then it will not work.
If you want to live check for errors and display it and change colors etc then you have to use AJAX
We have form page like this:
We wanted to make design like this:
Means:
Name & email and their text field should display as like above image.
Message & its box should display like comment section.
Same result need for Name & email present below.
Need space between 2 button present in bottom.
css
media only screen and (min-width: 1224px)
.send-friend h2 {
text-align: center;
}
#media only screen and (min-width: 1224px)
form .legend {
border: none;
color: #000;
font-family: 'Roboto Condensed', sans-serif;
font-size: 13px;
font-style: normal;
font-weight: bold;
line-height: 1.4;
margin: 0 0 15px;
padding-bottom: 7px;
text-rendering: optimizespeed;
text-transform: uppercase;
}
}
html
<div class="send-friend">
<?php
echo $this->getMessagesBlock()->toHtml();
?>
<div class="page-title">
<h1><?php
echo $this->__('Email to a Friend');
?></h1>
</div>
<form action="<?php
echo $this->getSendUrl();
?>" method="post" id="product_sendtofriend_form">
<div class="fieldset">
<?php
echo $this->getBlockHtml('formkey');
?>
<h2 class="legend"><?php
echo $this->__('Sender Details');
?></h2>
<ul class="form-list" id="sender_options">
<li class="fields">
<div class="field">
<label for="sender_name" class="required"><em>*</em><?php
echo $this->__('Name:');
?></label>
<div class="input-box">
<input name="sender[name]" value="<?php
echo $this->escapeHtml($this->getUserName());
?>" title="<?php
echo $this->quoteEscape($this->__('Name'));
?>" id="sender_name" type="text" class="input-text required-entry" />
</div>
</div>
<div class="field">
<label for="sender_email" class="required"><em>*</em><?php
echo $this->__('Email:');
?></label>
<div class="input-box">
<input name="sender[email]" value="<?php
echo $this->escapeHtml($this->getEmail());
?>" title="<?php
echo $this->quoteEscape($this->__('Email Address'));
?>" id="sender_email" type="email" autocapitalize="off" autocorrect="off" spellcheck="false" class="input-text required-entry validate-email" />
</div>
</div>
</li>
<li class="wide">
<label for="sender_message" class="required"><em>*</em><?php
echo $this->__('Message:');
?></label>
<div class="input-box">
<textarea name="sender[message]" class="input-text required-entry" id="sender_message" cols="3" rows="3"><?php
echo $this->escapeHtml($this->getMessage());
?></textarea>
</div>
</li>
</ul>
</div>
<div class="fieldset">
<h2 class="legend"><?php
echo $this->__('Recipient Details');
?></h2>
<ul class="form-list" id="recipients_options">
<li class="fields">
<div class="field">
<label for="recipients_name" class="required"><em>*</em><?php
echo $this->__('Name:');
?></label>
<div class="input-box">
<input name="recipients[name][]" type="text" class="input-text required-entry" id="recipients_name" />
</div>
</div>
<div class="field">
<label for="recipients_email" class="required"><em>*</em><?php
echo $this->__('Email Address:');
?></label>
<div class="input-box">
<input name="recipients[email][]" value="" title="<?php
echo $this->quoteEscape($this->__('Email Address'));
?>" id="recipients_email" type="email" autocapitalize="off" autocorrect="off" spellcheck="false" class="input-text required-entry validate-email" />
</div>
</div>
</li>
</ul>
</div>
<div class="buttons-set">
<p class="back-link"><a href="#" onclick="history.back(); return false;"><small>« </small><?php
echo $this->__('Back');
?></a></p>
<button type="submit" class="button<?php
if (!$this->canSend()):
?> disabled<?php
endif;
?>"<?php
if (!$this->canSend()):
?> disabled="disabled"<?php
endif;
?>><span><span><?php
echo $this->__('Send Email');
?></span></span></button>
<div id="max_recipient_message" style="display:none;">
<?php
if ($this->getMaxRecipients()):
?>
<p class="limit"><?php
echo $this->__('Maximum %d email addresses allowed.', $this->getMaxRecipients());
?></p>
<?php
endif;
?>
</div>
<?php
if (1 < $this->getMaxRecipients()):
?>
<p id="add_recipient_button">
<button type="button" onclick="add_recipient();" class="button"><span><span><?php
echo $this->__('Add Recipient');
?></span></span></button>
</p>
<?php
endif;
?>
</form>
</div>
Maybe you could try to put the form in a <div> and then increase the width of the input boxes.
Do put padding to leave some white space for aesthetic purpose :)
Example <input type="text" id="text" name="text_name" style="width: 300px;" />
(if you are not considering responsiveness)
I would prefer if you use .text{max-width:110%;}
Since you are new to CSS, the previous CSS shown can be used for multiple ids by putting a comma and the respective tags you would like the following css to apply.
Then for the words indicating which textbox is what, you could use a text-align:left
You can use bootstrap class text-center to set alignment in center position.
Following is my CSS code :
.registerFormContainer{width: 45%;border: 1px solid #2C5887; border-radius: 5px; text-align: center; margin: 0 auto; height: auto;}
.registerFormContainer h3{padding: 10px; background: #2C5887; border-top-radius: 5px; width: auto;}
.registerFormContainer h3 label{color: #fff; font-size: 18px; font-weight: bold;}
Here if I am using the height:auto; then its not displaying the border for .registerFormContainer and .registerFormContainer h3. And if I am using manual height like 300px then its showing the border. But if I am using manual height then the div is not expading after validation error. What should be the issue? I am learning CSS and not have much idea about it.
and Following is my html
<div class="registerFormContainer">
<h3><label style="background-image:url( '/images/lock.png'); width: auto; background-repeat:no-repeat; background-position:left center;"> Create an Account</label></h3>
<div class="row_2">
<center><?php echo $this->msg; ?></center>
<label class="label2"> </label>
<?php if ($this->displayimage) { ?>
<img src="<?php echo $this->displayimage; ?>"></img>
<?php } ?>
</div>
<div class="row_2">
<label class="label2"> </label>
<b>Welcome, <?php if (isset($this->displayname)) echo $this->displayname; ?></b>
</div>
<div class="row_2">
<label class="label_2" for="username">Email:</label>
<?php if (isset($this->fbid)) { ?>
<input class="required" id="username" name="username" type="hidden" value="<?php echo $this->email; ?>"/>
<?php echo $this->email; ?>
<?php } else { ?>
<input class="required" id="username" name="username" type="text"/>
<?php } ?>
</div>
<div class="row_2">
<label for="password" class="label_2">Password:</label>
<input class="required" id="rpassword" name="password" type="password"/>
</div>
<div class="row_2" >
<label for="cpassword" class="label_2">Confirm Password:</label>
<input class="required" id="cpassword" name="cpassword" type="password"/>
</div>
<div class="row_2">
<label class="label_2"> </label>
<input type="submit" class="submit" value="Submit" name="submit" id="submit">
</div>
</div>
Any help would be appreciated.
Please try overflow-y:auto for class registerFormContainer I hope it will be work for you.
thanks