info
Google Groups no longer supports new Usenet posts or subscriptions. Historical content remains viewable.
Dismiss
Contact form positioning error messages
19 views
Skip to first unread message
annettepe...@gmail.com
Mar 15, 2015, 6:16:43 AM3/15/15
to
I have a contact form with validation and it works fine. But there are 2 things that I would like to change:
1. The error messages are displayed in an errorlist at the top of the page. I would like the error message to be displayed in the formfield ( I tried that with placeholder, but that didn't work out) or other wise under, on top or at the and of each form field.
2. I would like the border-color to change to green when it is correctly fild. What is the best way to do that, with Jquery or a separate 'class' and css.
(If I am right informed validation should be in PHP and not jQuery.),
I tried to achief this by adding some div's like:
<div error="email">
<?php validation($email); ?>
</div>
All my afforts to change the layout just resulted in a different error and nothing else.
Could some one tell how, or where I can find how to change, the script so to achieve the different layout.
Unnecessary to say that this is alle quit new for me.
The complete code is:
<?php require_once 'validation.php'; ?>
<?php
$aErrors = array();
if ('POST' == $_SERVER['REQUEST_METHOD']) {
if ( !isset($_POST['name']) or !preg_match( '~^[\w ]{3,}$~', $_POST['name'] ) ) {
$aErrors['name'] = 'Please fill in your name';
}
if ( !isset($_POST['email']) or !preg_match( '~^[a-z0-9][a-z0-9_.\-]*@([a-z0-9]+\.)*[a-z0-9][a-z0-9\-]+\.([a-z]{2,6})$~i', $_POST['email'] ) ) {
$aErrors['email'] = 'Please fill in your e-mail address';
}
if ( !isset($_POST['message']) or !preg_match( '~^[\w\d ]{28,}$~', $_POST['message'] ) ) {
$aErrors['message'] = 'What would you like to share?';
}
if ( count($aErrors) == 0 ) {
header('Location: http://www.phpfreakz.nl/someotherpage.php');
exit();
}
}
/************************************************************************************************************
* Hier kunnen we een hele grote streep trekken. Alles wat hierboven was, was verwerking van de data, acties *
* bepalen etc. Alles wat hieronder staat, draait alleen maar om de uitvoer en de feedback. Niets hieronder *
* schrijft dingen naar de database, niets hierboven schrijft iets naar het scherm. Zo houden we het model *
* van de pagina gescheiden van de weergave! *
************************************************************************************************************/
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Forms</title>
<style type="text/css">
.errorlist, .error input{
border: 1px solid #f00;
background: #fdd;
}
form.cmxform fieldset {
margin-bottom: 10px;
}
form.cmxform legend {
padding: 0 2px;
font-weight: bold;
}
form.cmxform label {
display: inline-block;
line-height: 1.8;
vertical-align: top;
}
form.cmxform em {
font-weight: bold;
font-style: normal;
color: #f00;
}
form.cmxform label {
width: 100%; /* Width of labels */
}
input {
width: 80%;
height: 35px;
margin-left: auto;
margin-right: auto;
}
.contact {
width: 100%;
}
.formfield {
width: 80%;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<div class="contact">
<div class="formfield">
<form action="index.php" method="post" class="cmxform">
<p>Please complete the form below. Mandatory fields marked <em>*</em></p>
<fieldset>
<div class="fieldset">
<legend>Delivery Details</legend>
<div error="name">
<?php validation($aErrors['name']); ?>
</div>
<input id="name" name="name" placeholder="What is your name?" value="<?php echo isset($_POST['name']) ? htmlspecialchars($_POST['name']) : '' ?>"
/>
<div error="email">
<?php validation($email); ?>
</div>
<input id="email" name="email" placeholder="email" value="<?php echo isset($_POST['email']) ? htmlspecialchars($_POST['email']) : '' ?>" />
<div error="message">
<?php validation($message); ?>
</div>
<input id="message" name="message" placeholder="message" value="<?php echo isset($_POST['message']) ? htmlspecialchars($_POST['message']) : '' ?>" />
<input type="submit" value="Verstuur" />
</div>
</fieldset>
</form>
</div>
</div>
</body>
</html>
the code from validation.php looks like:
<?php
if ( isset($aErrors['error']) and count($aErrors['error']) > 0 ) {
print '<div class="errorlist">';
if ( $aErrors['error'] ) {
print 'div' . $aErrors . '</div>' ;
}
print '</div>';
}
?>
Many thanks.
1. The error messages are displayed in an errorlist at the top of the page. I would like the error message to be displayed in the formfield ( I tried that with placeholder, but that didn't work out) or other wise under, on top or at the and of each form field.
2. I would like the border-color to change to green when it is correctly fild. What is the best way to do that, with Jquery or a separate 'class' and css.
(If I am right informed validation should be in PHP and not jQuery.),
I tried to achief this by adding some div's like:
<div error="email">
<?php validation($email); ?>
</div>
All my afforts to change the layout just resulted in a different error and nothing else.
Could some one tell how, or where I can find how to change, the script so to achieve the different layout.
Unnecessary to say that this is alle quit new for me.
The complete code is:
<?php require_once 'validation.php'; ?>
<?php
$aErrors = array();
if ('POST' == $_SERVER['REQUEST_METHOD']) {
if ( !isset($_POST['name']) or !preg_match( '~^[\w ]{3,}$~', $_POST['name'] ) ) {
$aErrors['name'] = 'Please fill in your name';
}
if ( !isset($_POST['email']) or !preg_match( '~^[a-z0-9][a-z0-9_.\-]*@([a-z0-9]+\.)*[a-z0-9][a-z0-9\-]+\.([a-z]{2,6})$~i', $_POST['email'] ) ) {
$aErrors['email'] = 'Please fill in your e-mail address';
}
if ( !isset($_POST['message']) or !preg_match( '~^[\w\d ]{28,}$~', $_POST['message'] ) ) {
$aErrors['message'] = 'What would you like to share?';
}
if ( count($aErrors) == 0 ) {
header('Location: http://www.phpfreakz.nl/someotherpage.php');
exit();
}
}
/************************************************************************************************************
* Hier kunnen we een hele grote streep trekken. Alles wat hierboven was, was verwerking van de data, acties *
* bepalen etc. Alles wat hieronder staat, draait alleen maar om de uitvoer en de feedback. Niets hieronder *
* schrijft dingen naar de database, niets hierboven schrijft iets naar het scherm. Zo houden we het model *
* van de pagina gescheiden van de weergave! *
************************************************************************************************************/
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Forms</title>
<style type="text/css">
.errorlist, .error input{
border: 1px solid #f00;
background: #fdd;
}
form.cmxform fieldset {
margin-bottom: 10px;
}
form.cmxform legend {
padding: 0 2px;
font-weight: bold;
}
form.cmxform label {
display: inline-block;
line-height: 1.8;
vertical-align: top;
}
form.cmxform em {
font-weight: bold;
font-style: normal;
color: #f00;
}
form.cmxform label {
width: 100%; /* Width of labels */
}
input {
width: 80%;
height: 35px;
margin-left: auto;
margin-right: auto;
}
.contact {
width: 100%;
}
.formfield {
width: 80%;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<div class="contact">
<div class="formfield">
<form action="index.php" method="post" class="cmxform">
<p>Please complete the form below. Mandatory fields marked <em>*</em></p>
<fieldset>
<div class="fieldset">
<legend>Delivery Details</legend>
<div error="name">
<?php validation($aErrors['name']); ?>
</div>
<input id="name" name="name" placeholder="What is your name?" value="<?php echo isset($_POST['name']) ? htmlspecialchars($_POST['name']) : '' ?>"
/>
<div error="email">
<?php validation($email); ?>
</div>
<input id="email" name="email" placeholder="email" value="<?php echo isset($_POST['email']) ? htmlspecialchars($_POST['email']) : '' ?>" />
<div error="message">
<?php validation($message); ?>
</div>
<input id="message" name="message" placeholder="message" value="<?php echo isset($_POST['message']) ? htmlspecialchars($_POST['message']) : '' ?>" />
<input type="submit" value="Verstuur" />
</div>
</fieldset>
</form>
</div>
</div>
</body>
</html>
the code from validation.php looks like:
<?php
if ( isset($aErrors['error']) and count($aErrors['error']) > 0 ) {
print '<div class="errorlist">';
if ( $aErrors['error'] ) {
print 'div' . $aErrors . '</div>' ;
}
print '</div>';
}
?>
Many thanks.
Richard Yates
Mar 15, 2015, 9:48:10 AM3/15/15
to
The simplest solution for the first question might be to add one line
to each of the validation tests:
if(!isset($_POST['name']) or !preg_match( '~^[\w ]{3,}$~',
}
That will replace the faulty posted name with the error message and it
will appear in the form field.
It's not clear what you expect this section to do since you have not
shown what is in the included file "validation.php":
<div error="name">
<?php validation($aErrors['name']); ?>
</div>
----------------------------------------
On Sun, 15 Mar 2015 03:16:38 -0700 (PDT), annettepe...@gmail.com
wrote:
to each of the validation tests:
if(!isset($_POST['name']) or !preg_match( '~^[\w ]{3,}$~',
$_POST['name'] ) ) {
$aErrors['name'] = 'Please fill in your name';
$_POST['name'] = $aErrors['name'];
$aErrors['name'] = 'Please fill in your name';
}
That will replace the faulty posted name with the error message and it
will appear in the form field.
It's not clear what you expect this section to do since you have not
shown what is in the included file "validation.php":
<div error="name">
<?php validation($aErrors['name']); ?>
</div>
On Sun, 15 Mar 2015 03:16:38 -0700 (PDT), annettepe...@gmail.com
wrote:
annettepe...@gmail.com
Mar 15, 2015, 11:00:45 AM3/15/15
to
Dear Richard, Thanx for your help. I am sorry I thought that I had past the code of validation.php, but here it is:
validation.php:
<?php
if ( isset($aErrors['error']) and count($aErrors['error']) > 0 ) {
print '<div class="errorlist">';
if ( $aErrors['error'] ) {
print 'div' . $aErrors . '</div>' ;
}
print '</div>';
}
?>
Thanks for your help
Op zondag 15 maart 2015 14:48:10 UTC+1 schreef Richard Yates:
validation.php:
<?php
if ( isset($aErrors['error']) and count($aErrors['error']) > 0 ) {
print '<div class="errorlist">';
if ( $aErrors['error'] ) {
print 'div' . $aErrors . '</div>' ;
}
print '</div>';
}
?>
Op zondag 15 maart 2015 14:48:10 UTC+1 schreef Richard Yates:
> The simplest solution for the first question might be to add one line
> to each of the validation tests:
>
> if(!isset($_POST['name']) or !preg_match( '~^[\w ]{3,}$~',
> $_POST['name'] ) ) {
> $aErrors['name'] = 'Please fill in your name';
> $_POST['name'] = $aErrors['name'];
> }
>
> That will replace the faulty posted name with the error message and it
> will appear in the form field.
>
>
> It's not clear what you expect this section to do since you have not
> shown what is in the included file "validation.php":
>
> <div error="name">
> <?php validation($aErrors['name']); ?>
> </div>
>
>
>
> ----------------------------------------
>
> On Sun, 15 Mar 2015 03:16:38 -0700 (PDT),
> to each of the validation tests:
>
> if(!isset($_POST['name']) or !preg_match( '~^[\w ]{3,}$~',
> $_POST['name'] ) ) {
> $aErrors['name'] = 'Please fill in your name';
> $_POST['name'] = $aErrors['name'];
> }
>
> That will replace the faulty posted name with the error message and it
> will appear in the form field.
>
>
> It's not clear what you expect this section to do since you have not
> shown what is in the included file "validation.php":
>
> <div error="name">
> <?php validation($aErrors['name']); ?>
> </div>
>
>
>
> ----------------------------------------
>
> On Sun, 15 Mar 2015 03:16:38 -0700 (PDT),
Jerry Stuckle
Mar 15, 2015, 12:30:47 PM3/15/15
to
On 3/15/2015 11:00 AM, annettepe...@gmail.com wrote:
> Dear Richard, Thanx for your help. I am sorry I thought that I had past the code of validation.php, but here it is:
>
> validation.php:
>
> <?php
> if ( isset($aErrors['error']) and count($aErrors['error']) > 0 ) {
> print '<div class="errorlist">';
> if ( $aErrors['error'] ) {
> print 'div' . $aErrors . '</div>' ;
> }
> print '</div>';
> }
> ?>
>
> Thanks for your help
>
All include() does is to effectively copy the code from the referenced
> Dear Richard, Thanx for your help. I am sorry I thought that I had past the code of validation.php, but here it is:
>
> validation.php:
>
> <?php
> if ( isset($aErrors['error']) and count($aErrors['error']) > 0 ) {
> print '<div class="errorlist">';
> if ( $aErrors['error'] ) {
> print 'div' . $aErrors . '</div>' ;
> }
> print '</div>';
> }
> ?>
>
> Thanks for your help
>
file into the current file at the location of the include statement. It
does not create a function.
And even if it were a function, it would not have the results you desire
- nor the results you indicate you see.
What is the real code you're using that shows the errors at the top of
the page?
Also, your development system should always have the following in your
php.ini file:
error_reporting=E_ALL;
display_errors=on;
This will display any errors in your code, which can help in debugging.
--
==================
Remove the "x" from my email address
Jerry Stuckle
jstu...@attglobal.net
==================
mrr
Mar 16, 2015, 2:47:57 AM3/16/15
to
On 03/15/2015 11:16 AM, annettepe...@gmail.com wrote:
> 2. I would like the border-color to change to green when it is correctly fild. What is the best way to do that, with Jquery or a separate 'class' and css.
Am I wrong if you say you need some client-side code to achieve this?
> 2. I would like the border-color to change to green when it is correctly fild. What is the best way to do that, with Jquery or a separate 'class' and css.
(JavaScript + a condition/onchange() handler on each field for example)
--
mrr
Richard Yates
Mar 16, 2015, 7:13:03 PM3/16/15
to
after it retrieves and assesses the posted values.
.okay {......; }
.nogood {.....; }
...
$usethisclass = validate($_POST['someformvalue']) ? 'okay' : 'nogood';
...
<form><input name="someformvalue" class="<?php echo $usethisclass;
?>"/></form>
0 new messages