Best Way To Protect Html Form Fields Looking for suggestions on how to protect form fields during user inpu

[sonesay 7]

My working example is here http://forums.xisto.com/no_longer_exists/

The form submits to itself and stores what ever the user inputs into session variables. Thats all fine and I have validation checks for it, I wanted to add more and I remember comming across a site where they would lock from fields to prevent any changes if the information was already supplied and validated. I'm looking to build something similar but cant seem to figure out how to get that same effect at this time.

Heres my program logic so far application.php includes('application_content.php');

inside application_content i have my form. The form submits to itself checking validation and displaying 3 stages of the form (so far.. more to be added)
stage 0 - blank form, user just visited first time so display empty form
stage 1 - checks for post count if user submited form then run validations. if there are errors display errors and present same form for them to correct
stage 2 - no errors from pervious stage, just display the store session vars

Now the input field I'm interested in and particular concerned about is the date of birth field. Here I would rather the user use the javascript calender to pick a date then enter it manually. I hope this would eliminate any potiential errors like types or incorrect format. I mean this will save me doing validations .

Well one method I used was to make it read only. I've tried making it read only from different stages e.g 0,1,2 of the form but once posted it somehow loses storage from the session its suppose to be assigned to. This is what is confusing me as you can see on stage 1 of the form when there are no errors I lock the fields as read only for the other input fields and when it gets submitted to stage 2 for display purposes it does get saved in the session.

Any ideas of how to go about this task would be much appreciated ^^.

heres my program logic for the form 'application_content.php'

$user_ck_result = mysql_query($user_ck_query, $link);

$ck_result = "Default";
$pattern = "/[!|@|#|$|%|^|&|*|(|)|_|\-|=|+|\||,|.|\/|;| linenums:0'><?php/*Description------------File contains an application form for users to registerContents----------1. Functions2. Application Form // Part 1 2.1 Display Empty form 2.2 Check and Dsiplay form with any ERRORS if any 2.2.1 display form with errors 2.2.2 display from with no errors // Part 2 2.3 display details from part 1 (just for display pruposes making sure details are stored.)*/session_start();$sid = session_id();// 1. FUNCTIONSfunction ck_app_username($uname) { include("db.php"); // check if user already exisit $user_ck_query = "SELECT u_name FROM user WHERE u_name ='" . $uname . "'"; $user_ck_result = mysql_query($user_ck_query, $link); $ck_result = "Default"; $pattern = "/[!|@|#|$|%|^|&|*|(|)|_|\-|=|+|\||,|.|\/|;|:|\'|\"|\[|\]|\{|\}]/i"; // check for input if($uname == '') { $ck_result = "<span class='error_header'>Required!</span>"; $app_errors['username'] = true; } else if (preg_match($pattern, $uname)) { $ck_result = "<span class='error_header'>illegal characters</span>"; $app_errors['username'] = true; } else if (preg_match("/[0-9]/", $uname)) { $ck_result = "<span class='error_header'>No numbers in username!</span>"; $app_errors['username'] = true; } else if (strlen($uname) < 3) { $ck_result = "<span class='error_header'>3 Characters minimun!</span>"; $app_errors['username'] = true; } else if (mysql_num_rows($user_ck_result) > 0) { $ck_result = "<span class='error_header'>User Exist!</span>"; $app_errors['username'] = true; } else { $ck_result = "<span class='ok_header'>Available</span>"; unset($app_errors['username']); } return $ck_result;}function ck_app_password($pwd,$cpwd) {// version 1.0 $app_password_result = "default"; // check password if($pwd == '' || $cpwd == '') { $app_password_result = "<span class='error_header'>Enter password and confirm!</span>"; $app_errors['password'] = true; } // user submitted something else if ($pwd != $cpwd) { $app_password_result = "<span class='error_header'>Passwords do not match!</span>"; $app_errors['password'] = true; } // check for minimun chars for password 6 else if (strlen($pwd) < 6) { $app_password_result = "<span class='error_header'>Passwords must be 6 characters or more!</span>"; $app_errors['password'] = true; } // all checks done password ok else { $app_password_result = "<span class='ok_header'>OK!</span>"; unset($app_errors['password']); } // return result return $app_password_result;}function ck_name($name) { $ck_name_result = 'Default'; $regex = "/[^a-zA-Z]/"; if($name == '') { $ck_name_result = "<span class='error_header'>Required!</span>"; $app_errors['name'] = true; } else if(preg_match($regex,$name)) { $ck_name_result = "<span class='error_header'>Error. a-z A-Z only!</span>"; $app_errors['name'] = true; } else { $ck_name_result = "<span class='ok_header'>OK</span>"; unset($app_errors['name']); } return $ck_name_result;}function ck_email ($mail) { //default $ck_email_result = "Default"; //pattern $regex = '/\A(?:[a-z0-9!#$%&\'*+\/=?^_`{|}~-]+' .'(?:\.[a-z0-9!#$%&\'*+\/=?^_`{|}~-]+)*@' .'(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+(?:[a-z]{2}|' .'com|org|net|gov|biz|info|name|aero|biz|info|jobs|' .'museum)\\Z/i'; if ($mail == '') { $ck_email_result = "<span class='error_header'>Email Required!</span>"; $app_errors['email'] = true; } else if (preg_match($regex, $mail)) { $ck_email_result = "<span class='ok_header'>OK!</span>"; $app_errors['email'] = true; } else { $ck_email_result = "<span class='error_header'>Invalid Emai!</span>"; unset($app_errors['email']); } return $ck_email_result;} // END FUNCTIONS =======// 2. APPLICATION FORM ============================================================================================ // 2.1 DISPLAY EMPTY FORMif(count($p) == 0) {echo " <h1>Personal Details - Part 1 of 5</h1> <p> Fill in all the details below and any additional information you like. All yellow fieldds are requiured, Please make sure you have read and understood the rules before posting an application. </p> <p> Displaying pages for the first time. S ID = $sid </p> <form name=\"app_form\" method=\"post\" action=\"application.php\"> <input type=\"hidden\" name=\"app_stage\" value=\"1\" /> <ul class=\"app_details\"> <li class=\"col1\">Desired Username</li> <li><input type=\"text\" name=\"app_username\" /></li> </ul> <ul class=\"app_details\"> <li class=\"col1\">Password</li> <li><input type=\"password\" name=\"app_password\" /></li> </ul> <ul class=\"app_details\"> <li class=\"col1\">Comfirm Password</li> <li><input type=\"password\" name=\"app_cpassword\" /></li> </ul> <ul class=\"app_details\"> <li class=\"col1\">First Name</li> <li><input type=\"text\" name=\"app_fname\" /></li> </ul> <ul class=\"app_details\"> <li class=\"col1\">Last Name</li> <li> <input type=\"text\" name=\"app_lname\" /></li> </ul> <script language='javascript' type='text/javascript'> $(function() { $('.date-pick').datePicker({startDate:'01/01/1950'}); }); </script> <ul class=\"app_details\"> <li class=\"col1\">DOB</li> <li><input type=\"text\" size=\"10\" name=\"app_dob\" class='date-pick' value='01/01/1990' disabled='readonly' /></li> </ul> <ul class=\"app_details\"> <li class=\"col1\">Gender</li> <li> <select name=\"app_gender\" /> <option value=\"m\">Male</option> <option value=\"f\">female</option> </select> </li> </ul> <ul class=\"app_details\"> <li class=\"col1\">Email</li> <li> <input type=\"text\" name=\"app_email\" /> $email_result</li> </ul> <ul class=\"app_details\"> <li class=\"col1\"></li> <li><button>Next</button></li> </ul> </form> ";}// 2.2 Display form with any errors ============================================else if(count($p) > 0 && $p['app_stage'] < 2 ){ $s = $_SESSION; $app_username = strtolower($p['app_username']); $_SESSION['app_username'] = htmlspecialchars($app_username); $_SESSION['app_password'] = $p['app_password']; $_SESSION['app_cpassword'] = $p['app_cpassword']; $_SESSION['app_fname'] = $p['app_fname']; $_SESSION['app_lname'] = $p['app_lname']; $_SESSION['app_gender'] = $p['app_gender']; $_SESSION['app_dob'] = $p['app_dob']; $_SESSION['app_email'] = $p['app_email']; if ($p['app_stage'] == 1) { // check results if(!isset($s['app_errors'])) { $s['app_errors'] = array(); } $app_errors = $s['app_errors']; //username $username_result = ck_app_username($s['app_username']); if($username_result == "<span class='ok_header'>Available</span>") { unset($app_errors['username']); } else{ $app_errors['username'] = true; } //password $password_result = ck_app_password($s['app_password'],$s['app_cpassword']); if($password_result == "<span class='ok_header'>OK!</span>") { unset($app_errors['password']); } else{ $app_errors['password'] = true; } // names $fname_result = ck_name($s['app_fname']); $lname_result = ck_name($s['app_lname']); //email $email_result = ck_email($s['app_email']); if($email_result == "<span class='ok_header'>OK!</span>") { unset($app_errors['email']); } else{ $app_errors['email'] = true; } // 2.2.1 ECHO application with ERRORs ========================================== if(count($app_errors) > 0) { echo " <h1>Personal Details - Part 1 of 5</h1> <p> There are Errors please correct and resubmit. </p> <form name=\"app_form\" method=\"post\" action=\"application.php\"> <input type=\"hidden\" name=\"app_stage\" value=\"1\" /> <ul class=\"app_details\"> <li class=\"col1\">Desired Username</li> <li><input type=\"text\" name=\"app_username\" value=\"{$s['app_username']}\" /> $username_result</li> </ul> <ul class=\"app_details\"> <li class=\"col1\">Password</li> <li><input type=\"password\" name=\"app_password\" value=\"{$s['app_password']}\" /></li> </ul> <ul class=\"app_details\"> <li class=\"col1\">Comfirm Password</li> <li><input type=\"password\" name=\"app_cpassword\" value=\"{$s['app_cpassword']}\" /> $password_result</li> </ul> <ul class=\"app_details\"> <li class=\"col1\">First Name</li> <li><input type=\"text\" name=\"app_fname\" value=\"{$s['app_fname']}\" /> $fname_result</li> </ul> <ul class=\"app_details\"> <li class=\"col1\">Last Name</li> <li> <input type=\"text\" name=\"app_lname\" value=\"{$s['app_lname']}\" /> $lname_result</li> </ul> <script language='javascript' type='text/javascript'> $(function() { $('.date-pick').datePicker({startDate:'01/01/1950'}); }); </script> <ul class=\"app_details\"> <li class=\"col1\">DOB</li> <li><input type=\"text\" size=\"10\" name=\"app_dob\" value=\"{$s['app_dob']}\" class='date-pick' disabled='readonly' /> </li> </ul> <ul class=\"app_details\"> <li class=\"col1\">Gender</li> <li> <select name=\"app_gender\" /> "; // check if gender selected if($p['app_gender'] == 'f') { echo "<option value=\"f\">female</option> <option value=\"m\">Male</option> "; } else { echo "<option value=\"m\">Male</option> <option value=\"f\">female</option> "; } echo " </select> </li> </ul> <ul class=\"app_details\"> <li class=\"col1\">Email</li> <li> <input type=\"text\" name=\"app_email\" value=\"{$s['app_email']}\" /> $email_result </li> </ul> <ul class=\"app_details\"> <li class=\"col1\"></li> <li> "; // check for any errors before displaying buttons if(count($app_errors) > 0) { echo "<button>Re-submit</button>"; } else { echo "<button>Submit</button> "; } echo " </li> </ul> </form> "; } // 2.2.2 ECHO application form with 0 ERRORS ========================================== else { echo " <h1>Personal Details - Part 1 of 5</h1> <p> Please confirm details and submit, If there are any changed needed to be made hit the back button now. </p> <form name=\"app_form\" method=\"post\" action=\"application.php\"> <input type=\"hidden\" name=\"app_stage\" value=\"2\" /> <ul class=\"app_details\"> <li class=\"col1\">Desired Username</li> <li><input type=\"text\" name=\"app_username\" value=\"{$s['app_username']}\" disabled='readonly' /> $username_result</li> </ul> <ul class=\"app_details\"> <li class=\"col1\">Password</li> <li><input type=\"password\" name=\"app_password\" value=\"{$s['app_password']}\" disabled='readonly' /></li> </ul> <ul class=\"app_details\"> <li class=\"col1\">Comfirm Password</li> <li><input type=\"password\" name=\"app_cpassword\" value=\"{$s['app_cpassword']}\" disabled='readonly' /> $password_result</li> </ul> <ul class=\"app_details\"> <li class=\"col1\">First Name</li> <li><input type=\"text\" name=\"app_fname\" value=\"{$s['app_fname']}\" disabled='readonly' /> $fname_result</li> </ul> <ul class=\"app_details\"> <li class=\"col1\">Last Name</li> <li> <input type=\"text\" name=\"app_lname\" value=\"{$s['app_lname']}\" disabled='readonly' /> $lname_result</li> </ul> <script language='javascript' type='text/javascript'> $(function() { $('.date-pick').datePicker({startDate:'01/01/1950'}); }); </script> <ul class=\"app_details\"> <li class=\"col1\">DOB</li> <li><input type=\"text\" size=\"10\" name=\"app_dob\" value=\"{$s['app_dob']}\" class='date-pick' disabled='disabled' /> </li> </ul> <ul class=\"app_details\"> <li class=\"col1\">Gender</li> <li> <select name=\"app_gender\" disabled='readonly'/> "; // check if gender selected if($p['app_gender'] == 'f') { echo "<option value=\"f\" >female</option> <option value=\"m\">Male</option> "; } else { echo "<option value=\"m\" >Male</option> <option value=\"f\">female</option> "; } echo " </select> </li> </ul> <ul class=\"app_details\"> <li class=\"col1\">Email</li> <li> <input type=\"text\" name=\"app_email\" value=\"{$s['app_email']}\" disabled='readonly' /> $email_result </li> </ul> <ul class=\"app_details\"> <li class=\"col1\"></li> <li> "; // check for any errors before displaying buttons if(count($app_errors) > 0) { echo "<button>Re-submit</button>"; } else { echo "<button>Submit</button> "; } echo " </li> </ul> </form> "; } } }// 2.3 Display stored details from part 1else if (count($p) > 0 && $p['app_stage'] == 2) { $post_count = count($p); echo " <h1>Personal Details - Part 2 of 5</h1> <p> Part 2 </p> <form name=\"app_form\" method=\"post\" action=\"application.php\"> <input type=\"hidden\" name=\"app_stage\" value=\"2\" /> <ul class=\"app_details\"> <li class=\"col1\">Desired Username</li> <li><input type=\"text\" name=\"app_username\" value=\"{$s['app_username']}\" /> $username_result</li> </ul> <ul class=\"app_details\"> <li class=\"col1\">Password</li> <li><input type=\"password\" name=\"app_password\" value=\"{$s['app_password']}\" /></li> </ul> <ul class=\"app_details\"> <li class=\"col1\">Comfirm Password</li> <li><input type=\"password\" name=\"app_cpassword\" value=\"{$s['app_cpassword']}\" /> $password_result</li> </ul> <ul class=\"app_details\"> <li class=\"col1\">First Name</li> <li><input type=\"text\" name=\"app_fname\" value=\"{$s['app_fname']}\" /> $fname_result</li> </ul> <ul class=\"app_details\"> <li class=\"col1\">Last Name</li> <li> <input type=\"text\" name=\"app_lname\" value=\"{$s['app_lname']}\" /> $lname_result</li> </ul> <script language='javascript' type='text/javascript'> $(function() { $('.date-pick').datePicker({startDate:'01/01/1950'}); }); </script> <ul class=\"app_details\"> <li class=\"col1\">DOB</li> <li><input type=\"text\" size=\"10\" name=\"app_dob\" value=\"{$s['app_dob']}\" class='date-pick' /> </li> </ul> <ul class=\"app_details\"> <li class=\"col1\">Gender</li> <li> <select name=\"app_gender\" /> "; // check if gender selected if($p['app_gender'] == 'f') { echo "<option value=\"f\">female</option> <option value=\"m\">Male</option> "; } else { echo "<option value=\"m\">Male</option> <option value=\"f\">female</option> "; } echo " </select> </li> </ul> <ul class=\"app_details\"> <li class=\"col1\">Email</li> <li> <input type=\"text\" name=\"app_email\" value=\"{$s['app_email']}\" /> $email_result </li> </ul> <ul class=\"app_details\"> <li class=\"col1\"></li> <li><button>Submit</button></li> </ul> </form> "; }?>

[sonesay 7]

ok after hours of serching I find this

https://www.daniweb.com/programming/web-development/threads/91092/disable-lock-text-input-form-fields

I didnt even know 'readonly' attributes existed. Anyway It seems to work for me so far so if anyone else is looking for the same solution there you go.

readonly='readonly'

[galexcd 0]

Just a quick note if it essential to the security of the website that those fields remain unedited, this option is exploitable. Anybody can do a bit of javascript injection and make those fields editable again.

Edited December 26, 2007 by alex7h3pr0gr4m3r (see edit history)

[sonesay 7]

Thanks for the heads up on javascript injeciton, I never knew you could do that. Its a good think Its only intent is to try and keep the applications from users to join clean and valid as possible from user input. The applications posted to join will need to be approved by an admin or leader later on so I think it should be ok. I'll reemmber not to rely on this method for real important information being outputed back to the broswer.