codeline Posted August 17, 2010 Share Posted August 17, 2010 I built a basic form with certain fields required. When a required field isn't filled, the errors are echoed but not in the best area. I'd like for each error message to be displayed underneath their respected input fields. What do I need to look into? <?php if(!empty($_POST['submit'])) { // set variables $name = mysql_real_escape_string($_POST['name']); $email = mysql_real_escape_string($_POST['email']); $email2 = mysql_real_escape_string($_POST['email2']); $age = mysql_real_escape_string($_POST['age']); $city = mysql_real_escape_string($_POST['city']); $state = mysql_real_escape_string($_POST['state']); // 1A. REQUIRED FIELDS VERIFICATION if(!empty($name) && !empty($email) && !empty($email2) && !empty($city) && !empty($state)) { // 1B. END REQUIRED FIELDS VERIFICATION } else { echo '<img src="images/icon_error.png" alt="" title="" /> Please fill out the required fields.<br />'; if (empty($name)) { echo 'Whats your name?!<br />'; } if (empty($email)) { echo 'No email given.<br />'; } if (empty($email2)) { echo 'Please verify your email<br />'; } if (empty($city)) { echo 'What city are you from?<br />'; } if (empty($state)) { echo 'What State!<br />'; } echo '<br /><br />'; } // 1B. END REQUIRED FIELDS ERROR CODES } ?> <form action="<?php $_SERVER['PHP_SELF']; ?>" method="post"> <div class="formSec"><label for="name" class="required">Full Name:</label> <input type="text" name="name" id="name" value="" /></div> <div class="formSec"><label for="email" class="required">Email:</label> <input type="text" name="email" id="email" value="" /></div> <div class="formSec"><label for="email2" class="required">Confirm Email:</label> <input type="text" name="email2" id="email2" value="" /></div> <div class="formSec"><label for="age" class="required">Age:</label> <input type="text" name="age" id="age" value="" /></div> <div class="formSec"><label for="city" class="required">City:</label> <input type="text" name="city" id="city" value="" /></div> <input class="submit" type="submit" name="submit" value="Submit" /> </form> Quote Link to comment Share on other sites More sharing options...
abdfahim Posted August 17, 2010 Share Posted August 17, 2010 instead of echoing error message, set error flags (e.g. $nameerr, $emailerr etc.) in case error happens. Then in the respective place, chk whether error flag is set and echo the error message Quote Link to comment Share on other sites More sharing options...
palle Posted August 17, 2010 Share Posted August 17, 2010 A very simple approatch <?php if(isset($_POST['submit']){ $f_name = mysql_real_escape_string($_POST['f_name']); $error = array(); if(empty($f_name){ $error['f_name'] = "error message here"; } else if (){ // some more checking } else { // Success... } } ?> <html> ... <form> <input type="text" name="f_name" /> <?php if(isset($error['f_name']){ echo $error['f_name'] } ?> </form> ... </html> Quote Link to comment Share on other sites More sharing options...
codeline Posted August 17, 2010 Author Share Posted August 17, 2010 @abdbuet .. is that almost a similar process at palle's suggestion? Quote Link to comment Share on other sites More sharing options...
codeline Posted August 18, 2010 Author Share Posted August 18, 2010 Can I get some help on this process: instead of echoing error message, set error flags (e.g. $nameerr, $emailerr etc.) in case error happens. Then in the respective place, chk whether error flag is set and echo the error message Quote Link to comment Share on other sites More sharing options...
palle Posted August 18, 2010 Share Posted August 18, 2010 I have set up a complete example just copy, paste it and give it a try.. This is a very ease way of doing it but it can be somehow cumbersome if you have alot of inputdata to validate. Please notyfie me if you get it to work or dont work <?php // return error message in the form function form_error($name){ global $error; if(isset($error[$name])){ $var = " <div class=\"error\"> <ul>$error[$name]</ul> </div>"; return $var; } } // Make sure that the value from the inputfield from the form are in an array function clean_post($name){ $clean_name = array(); if(isset($_POST[$name])){ $clean_name[$name] = $_POST[$name]; return $clean_name[$name]; } } // ascape dangerous characters in submitted data. function clean_html($output){ $output = ucfirst($output); $output = htmlentities($output,ENT_QUOTES, 'ISO-8859-1'); return $output; } // When the form is submitted... then action is taken if(isset($_POST['submit'])){ $first_name = clean_post('first_name'); $last_name = clean_post('last_name'); //formvalidation begins $error = array(); if(!strlen($first_name)){ // make sure that they have entered a firstname $error['first_name'] = "<li>You have to enter a firstname.</li>"; } else if(!ctype_alpha($first_name)){ // make sure tha the firstname only consits of letters. $error['first_name'] = "<li>Your firstname can only consist letters.</li>"; } else if(!strlen($last_name)){ // make sure that they have entered a lastname $error['last_name'] = "<li>You have to enter a lastnamn.</li>"; } else if(!ctype_alpha($last_name)){ // make sure tha the lastname only consits of letters. $error['last_name'] = "<li>Your lastname can only consist letters.</li>"; // You can add as many if else statment as you need before your output a message. } else { // print out a message on the screen. $output = " Thank you " . clean_html($first_name) . " " . clean_html($last_name) . " for submiting the form "; } } ?> <!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" lang="sv" xml:lang="sv"> <head> <title>Login</title> <meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" /> <meta http-equiv="content-language" content="sv" /> <style type="text/css"> html { font-size: 125%; } body { font: 50% new-roman, arial, sans-sarif; } p{ font-size: 1.4em; padding: 1em; } *{margin: 0;padding:0} div#center{ width: 40em; margin: 2em auto; } form#login{ background: #f1f1f1; margin-top: 1em; -moz-border-radius: 1em; -moz-box-shadow: 3px 3px 3px #888; } form#login fieldset{ padding: 1em; border: none; } form#login label{ float: left; width: 10em; font-size: 1.2em; color: gray; } form#login input[type="submit"]{ background: #ddd; border: none; color: #333; display: block; margin: 0 auto; width: 5em; padding: .4em; } form#login div.containerInput{ padding: 10px; margin: 10px; } form#login div.error{ background: #BF4747; padding: 5px; margin: 10px } form#login div.error ul li{ list-style-position: inside; color: #fff; font-size: 1.2em; } </style> </head> <body> <div id="center"> <p><?php print($output);?></p> <form action="<?php echo $_SERVER['SCRIPT_NAM'];?>" method="post" id="login"> <fieldset> <div class="containerInput"> <label for="first_name">Firstname: </label> <input id="first_name" type="text" name="first_name" value="<?php echo clean_html($first_name);?>" /> </div> <?php echo form_error('first_name');?> <div class="containerInput"> <label for="last_name">Lastname: </label> <input id="last_name" type="text" name="last_name" value="<?php echo clean_html($last_name);?>" /> </div> <?php echo form_error('last_name');?> <input type="submit" name="submit" value="Submit"/> </fieldset> </form> </div> </body> </html> Quote Link to comment Share on other sites More sharing options...
abdfahim Posted August 19, 2010 Share Posted August 19, 2010 Hi codeline, what I said was just a simple coding similar to what palle suggests in his first post. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.