Peter64 Posted March 13, 2015 Share Posted March 13, 2015 I could use some help with the following problem: I have a contact formwith 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.) 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. Thanx in advance Below you find the code of the contact form: <?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['address1']) or !preg_match( '~^[wd ]{5,}$~', $_POST['address1'] ) ) { $aErrors['address1'] = 'Please fill in your adress'; } if ( !isset($_POST['address2']) or !preg_match( '~^([wd ]{5,})?$~', $_POST['address2'] ) ) { $aErrors['address2'] = 'Please fill in your adress'; } if ( !isset($_POST['towncity']) or !preg_match( '~^[wd' ]*$~', $_POST['towncity'] ) ) { $aErrors['towncity'] = 'Please fill in your town/city'; } if ( !isset($_POST['postcode']) or !preg_match( '~^d{4} ?[a-zA-Z]{2}$~', $_POST['postcode'] ) ) { $aErrors['postcode'] = 'Please fill in your postal code'; } if ( count($aErrors) == 0 ) { header('Location: http://'); exit(); }}?><!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 fieldset ol { margin: 0; padding: 0; } form.cmxform fieldset li { list-style: none; padding: 5px; margin: 0; } form.cmxform em { font-weight: bold; font-style: normal; color: #f00; } form.cmxform label { width: 120px; /* Width of labels */ } </style> </head> <body> <form action="contact.php" method="post" class="cmxform"> <?php if ( isset($aErrors) and count($aErrors) > 0 ) { print '<ul class="errorlist">'; foreach ( $aErrors as $error ) { print '<li>' . $error . '</li>'; } print '</ul>'; } ?> <p>Please complete the form below. Mandatory fields marked <em>*</em></p> <fieldset> <legend>Delivery Details</legend> <ol> <?php echo isset($aErrors['name']) ? '<li class="error">' : '<li>' ?> <label for="name">Name<em>*</em></label> <input id="name" name="name" value="<?php echo isset($_POST['name']) ? htmlspecialchars($_POST['name']) : '' ?>" /> </li> <?php echo isset($aErrors['email']) ? '<li class="error">' : '<li>' ?> <label for="email">E-mail<em>*</em></label> <input id="email" name="email" value="<?php echo isset($_POST['email']) ? htmlspecialchars($_POST['email']) : '' ?>" /> </li> <?php echo isset($aErrors['address1']) ? '<li class="error">' : '<li>' ?> <label for="address1">Address<em>*</em></label> <input id="address1" name="address1" value="<?php echo isset($_POST['address1']) ? htmlspecialchars($_POST['address1']) : '' ?>" /> </li> <?php echo isset($aErrors['address2']) ? '<li class="error">' : '<li>' ?> <label for="address2">Address 2</label> <input id="address2" name="address2" value="<?php echo isset($_POST['address2']) ? htmlspecialchars($_POST['address2']) : '' ?>" /> </li> <?php echo isset($aErrors['towncity']) ? '<li class="error">' : '<li>' ?> <label for="towncity">Town/City</label> <input id="towncity" name="towncity" value="<?php echo isset($_POST['towncity']) ? htmlspecialchars($_POST['towncity']) : '' ?>" /> </li> <?php echo isset($aErrors['postcode']) ? '<li class="error">' : '<li>' ?> <label for="postcode">Postal Code<em>*</em></label> <input id="postcode" name="postcode" value="<?php echo isset($_POST['postcode']) ? htmlspecialchars($_POST['postcode']) : '' ?>" /> </li> </ol> <input type="submit" value="Verstuur" /> </fieldset> </form> </body></html> Link to comment Share on other sites More sharing options...
thescientist Posted March 13, 2015 Share Posted March 13, 2015 This is mostly just a matter of HTML / CSS. It would be helpful if you explained what errors you saw when trying to change the position. Link to comment Share on other sites More sharing options...
Peter64 Posted March 15, 2015 Author Share Posted March 15, 2015 Thanx for the reply. I have tried to change the code to ( with help of searching the internet ): <?php require_once 'validation.php'; ?><?php// We gaan de errors in een array bijhouden$aErrors = array();if ('POST' == $_SERVER['REQUEST_METHOD']) { // Er zijn gegevens verstuurd naar deze pagina! // Een naam bevat letters en spaties (minimaal 3) if ( !isset($_POST['name']) or !preg_match( '~^[w ]{3,}$~', $_POST['name'] ) ) { $aErrors['name'] = 'Please fill in your name'; } // Een email-adres is wat ingewikkelder 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'; } // Een adres heeft letters, cijfers, spaties (minimaal 5) if ( !isset($_POST['message']) or !preg_match( '~^[wd ]{28,}$~', $_POST['message'] ) ) { $aErrors['message'] = 'What would you like to share?'; } if ( count($aErrors) == 0 ) { // We hebben alle gegevens // Gegevens verwerken! // Volgende pagina aub 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> <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> I hoped by creating div's for the error messages it would make it easy to position the error messages. The 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>'; }?> But the error that keeps appearing is: Fatal error: Call to undefined function validation() in /Users/gebruiker/Documents/MAMP/htdocs/validation kopie 2/index.php on line 104. Thanks again Link to comment Share on other sites More sharing options...
dsonesuk Posted March 15, 2015 Share Posted March 15, 2015 You are calling for a funtion that does not exist<?php validation($message); ?>There should be a function similar tofunction validation($arg){Code to run on function call...}Hence undefined function validation() error message Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now