1 Replies - 524 Views - Last Post: 22 March 2013 - 10:05 AM Rate Topic: -----

#1 GitLee  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 11
  • Joined: 17-February 13

Help with validating forms using php

Posted 21 March 2013 - 08:20 PM

So far I am able to print out the users first name when the form is submitted. I need to use php to match a list of users with their first and last name and email to see if they exist on the server. I have a list of users, when it is validated and correct it will say welcome otherwise it will say and error message.

this is my task.

Quote

1.
Assuming that all users to this website have been registered, and the list of registered users is stored on the server, upon clicking the Submit button, the user inputs are first validated on the client side as in the previous lab. The user inputs are also sent to a PHP script on the server to validate whether the user’s first and last name, and email match one of the entries of the registered users in the server.
2.
Users to the website may use upper and lower case characters. You need to “standardize” how the input strings are compared with the data stored in the server file.
3.
If the user’s credentials are valid, the users will be informed that someone will contact them soon. Otherwise, they will be notified that their name and email address are not valid. The reply web pages should have the same style and format as other pages. Here is an example.


USERS.txt
John Smith jsmith@msn.com
Mary Jane mjane@gmail.com
George Dakis george_dakis@hotmail.com
Jason Lowry jasonl888@msn.com
Bethany Dakoda dakado1224@live.com
Bacon Darron bdarron@msn.com
Jane Makowsky jmakowsky@bigfoot.com
Beagle Dohar bdohar@hotmail.com
Jackie Wong jwong515@qq.com
Becky Holsten bholsten@gmail.com


Joinus HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Lab09</title>
    <link href="form.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="validation.js">
    </script>
  </head>
  
  <body>
  
 
  
    <!-- header -->
    <div class="header">
      <div class="header_interior">
        <img src="images/logo.gif" alt="Logo" width="44" height="44" /> 
        <h1 class="title">Company name</h1>
      </div>
    </div>
    
    <!-- content -->
    <div class="content_body">
      <div class="content_interior">
        <div class="left_column">
          <div class="navigation">
            <ul class="markermenu">
              <li><a href="./index.html">Home</a></li>
              <li><a href="./services.html">Services</a></li>
              <li><a href="./index.html">Portfolio</a></li>
              <li><a href="./joinus.html">Join Us</a></li>
              <li class="last-child"><a href="./index.html">Contact Us</a></li>     
            </ul> 
          </div> <!-- navigation -->

          <div class="navigationbtm">
          </div>
          <br/>
          <img src="images/img-2.jpg" alt="sample 2"/>
        </div> <!-- left_column -->

        <div class="right_column">
          <h1>Who we are</h1>
          <p>We are a group of CST students, past and present, offering our website creation services to non-profit organization in the lower mainland. We work in teams made up of experts in design, development, and project management.</p>
          <div class="hr">
          </div>
          <h2>Join us now!</h2>
          <p>To join this dynamic group of web developers, fill in the application below and you will be contacted shortly.</p>

		  <!-- From starts -->
          <form action="join.php" method="post" onsubmit="return formValidate()">
            <div id="itemPosition">
              <div id="errPosition">
              </div>
              <label class="titles" for="selPosition">Which position are you applying for? <span class="red">*</span></label>
              <select id="selPosition" name="position" style="width: 300px">
                <option value=""></option>
                <option value="manager">Project Manager</option>
                <option value="designer">Graphic Designer</option>
                <option value="developer">Web Developer</option>
                <option value="database">Database Administrator</option>
              </select>              
            </div>
            <br />
            <br />
            <div id="passComp">
              <div id="errPosition">
              </div>
              <label class="titles" for="radPassedWeb_0">Passed Comp 1536? <span class="red">*</span></label>
              <br />
              <input id="radPassedWeb_0" type="radio" name="answer" value="yes">Yes
              <br />
              <input id="radPassedWeb_1" type="radio" name="answer" value="no">No
            </div>
            <br />
            <br />
            <div id="posStart">
              <div id="errStart">
              </div>
              <label class="titles" for="txtStartDate_0">Earliest start date? <span class="red">*</span></label>
              <br />
              <input id="txtStartDate_0" name="month" maxlength="2" size="2">/
              <input id="txtStartDate_1" name="day" maxlength="2" size="2">/
              <input id="txtStartDate_2" name="year" maxlength="4" size="4">
              <p id="labeldate"><span class="datepad">MM</span><span class="datepad">DD</span>YYYY</p>
            </div>
            <br />

            <div id="portURL">
              <div id="errURL">
              </div>
              <label class="titles" for="txtPortfolio">Portfolio URL</label>
              <input id="txtPortfolio" name="link" maxlength="100" size="84">
            </div>
            <br />
            <br />
            <div id="attachFile">
              <div id="errFile">
              </div>
              <label class="titles" for="fileResume">Attach resume</label>
              <br />
              <input type="file" name="browse" id="fileResume">
              <p class="subtext">Word or PDF Documents Only</p>
            </div>
            <br />
            <div id ="namePosition">
              <div id="errName">
              </div>
              <label class="titles" for="txtFirstName">Name <span class="red">*</span></label>
              <br />
              <input id="txtName_0" type="text" name="first" maxlength="20" size="20">
              <input id="txtName_1" type="text" name="last" maxlength="25" size="20">
              <p class="subtext"><span class="namepad">First</span>Last</p>
            </div>
            <br />
            <div id="emailPosition">
              <div id="errEmail">
              </div>
              <label class="titles" for="txtEmail">Email Address <span class="red">*</span></label>
              <input id="txtEmail" type="text" name="email" maxlength="100" size="84">
            </div>
            <br />
            <br />
            <div id="phonePosition">
              <div id="errPhone">
              </div>
              <label class="titles" for="txtPhone_0">Phone <span class="red">*</span></label>
              <br />
              <input id="txtPhone_0" type="text" name="phone" maxlength="3" size="3"> -
              <input id="txtPhone_1" type="text" name="phone" maxlength="3" size="3"> -
              <input id="txtPhone_2" type="text" name="phone" maxlength="4" size="4">
              <p class="subtext"><span class="numpad">(###)</span><span class="numpad">###</span>####</p>
            </div>
            <br />
            <label id="moreinfo" for="taComments">Any additional info for us</label>
            <br />
            <textarea id="taComments" name="textbox" rows="4" cols="40" ></textarea>
            <br />
            <input type="submit" value="Submit">
          </form>
          <!-- Form ends -->
        </div> <!-- right_column -->
      </div> <!-- content_interior -->
      <br clear="all"/>
    </div> <!-- content_body -->
    <!-- footer-->
    <div class="footer">
      <div class="footer-inner">
        <div style="text-align:center;">Copyright &copy; 2010 YourName | Designed by: 
          <a href="#">Git Hui & Jim Soo</a>
        </div>
      </div> <!-- footer-inner -->
      <br clear="all"/>
    </div> <!-- footer -->
  </body>
</html>




Joinus PHP
<html> 
<head>
    <meta charset="utf-8">
    <title>Validation</title>
    <link href="form.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="validation.js">
    </script>
  </head>
	<body>
    <!-- header -->
    <div class="header">
      <div class="header_interior">
        <img src="images/logo.gif" alt="Logo" width="44" height="44" /> 
        <h1 class="title">Company name</h1>
      </div>
    </div>
    
    <!-- content -->
    <div class="content_body">
      <div class="content_interior">
        <div class="left_column">
          <div class="navigation">
            <ul class="markermenu">
              <li><a href="./index.html">Home</a></li>
              <li><a href="./services.html">Services</a></li>
              <li><a href="./index.html">Portfolio</a></li>
              <li><a href="./joinus.html">Join Us</a></li>
              <li class="last-child"><a href="./index.html">Contact Us</a></li>     
            </ul> 
          </div> <!-- navigation -->

          <div class="navigationbtm">
          </div>
          <br/>
          <img src="images/img-2.jpg" alt="sample 2"/>
        </div> <!-- left_column -->

        <div class="right_column">
          <h1>OOGA BOOGA</h1>
           <?php
		   $file=fopen("users.txt", "r");
		   
			$firstname = $_POST["first"];
		   ?>
		   <?php
		   $file=fopen("users.txt","r");
		   
		    $lastname = $_POST["last"];
			?>
		   <br>
			<p>Welcome <?php echo $firstname?></p>
          
        </div> <!-- right_column -->
      </div> <!-- content_interior -->
      <br clear="all"/>
    </div> <!-- content_body -->
    <!-- footer-->
    <div class="footer">
      <div class="footer-inner">
        <div style="text-align:center;">Copyright &copy; 2010 YourName | Designed by: 
          <a href="#">Git Hui</a>
        </div>
      </div> <!-- footer-inner -->
      <br clear="all"/>
    </div> <!-- footer -->
  </body>
</html>



Form CSS
/* CSS Document */
body{
	margin: 0;
	padding: 0;
	font-family: "Lucida Grande", Verdana, sans-serif;
	font-size: small;
	color: #38230E;
}

/* header */
.header{
	position:fixed;
	top:0;
	height:88px;
	width:100%;
	background-color:#006699;
	border-top: 8px solid #6699CC
}

.header_interior{
	margin-left:auto;
	margin-right:auto;
	width:760px;
	margin-top:25px;
}

div .header_interior img {float:left; margin-right:10px;}

.title{
	color:#FFFFFF;
	font-size:25px;
	margin:0px;
	padding-top:3px;
}


/* content */
.content_body{
	margin-top:88px;
	background-color:#F6F1DE;
}

.content_interior{
	width:760px;
	margin-left:auto;
	margin-right:auto;
}

/* column left */
.left_column{
	width:200px;
	float:left;
	margin-top:25px;
	clear:both;
}

.navigation{
	width:184px;
	padding-left:6px;
	padding-right:6px;
	background-image:url(images/nav_side.jpg);
}

.navigationbtm{
	width:196px;
	background-image:url(images/nav_btm.jpg);
	background-repeat:no-repeat;
	height:8px;
	margin-top:-5px;
}

.markermenu{
	margin: 5px 0;
	padding: 0;
	width:180px;
	list-style-type: none;
	list-style:none;
}

.markermenu li{
	margin: 5px 0;
}

.markermenu li a{
	background:url(images/arrow.gif) no-repeat 2px center;
	font-weight:bold;
	color: #006699;
	display: block;
	padding: 3px 0;
	padding-left: 20px;
	text-decoration: none;
	border-bottom: 1px solid #B5B5B5;
}

.markermenu li a:visited, .markermenu li a:active{
	color: #00014e;
}

.markermenu li a:hover{
	color: black;
}

.markermenu li.last-child a{
	border-bottom-width: 0px;
}


/* column right */
.right_column{
	width:545px;
	float:right;
	margin-top:25px;
	margin-bottom:25px;
	border-left: solid 1px #E0D0B1;
	padding-left: 10px;
}

.hr{
	width:485px;
	height:8px;
	background-image:url(images/hr.gif);
	margin-left:auto;
	margin-right:auto;
	margin-bottom:10px;
	background-repeat: no-repeat;
}

h2 {
	margin: 0;
	color: #006699;
	font-size: 18px;
	font-weight: normal;
	letter-spacing: -1px;
	padding-left:25px;
	background-image:url(images/h2.gif);
	background-repeat:no-repeat;
}

h1 {
	font-size: 20px;
	font-weight: normal;
	letter-spacing: -1px;
	color: #006699;
	margin: 0;
}

#labeldate
{
	position:relative;
	font-size:10px;
	padding-left:17px;
	margin:0px;
}
.red{color:#B22222;}

.titles
{
	margin-bottom:0px;
	font-weight:bold;
}

.subtext
{
	margin:0px;
	font-size:10px;
}

#moreinfo
{
	color:#0099FF;
	margin-bottom:0px;
}

#resize
{
	width:250px;
	height:60px;
}
/*modifies table*/
table
{
	border-collapse:collapse;
	width:400px;
	height:185px;
	border:solid 2px #336633;
	margin-right:auto;
	margin-left:auto;
	margin-top:20px;
}
/*modifies odd cells*/
td:nth-of-type(odd)
{
	padding-left:25px;
	padding-right:25px;
	padding-top:5px;
	padding-bottom:5px;
	font-weight:bold;
	width:100px;
}
/*modifies odd rows*/
tr:nth-of-type(odd)
{
	background-color:white;
}

.datepad
{
	padding-right:40px;
}

.namepad
{
	padding-left:3px;
	padding-right:112px;
}

.numpad
{
	padding-right:45px;
}

/* footer */

.footer{
	background-color:#EFE6CE;
	padding-top:25px;
	padding-bottom:25px;
}

.footer-inner{
	width:760px;
	margin-left:auto;
	margin-right:auto;
}

.footer-div{
	width:150px;
	float:left;
	margin-right:20px;
	margin-left:20px;
}

div.error {
	display: block !important;
	border: 1px solid #F9B9B2;
	background-color: #FFDFDF !important;
}


Javascript
function $(id) {
  var element = document.getElementById(id);
    if( element == null ) {
      alert( 'Programmer error: ' + id + ' does not exist.' );
    }
  return element;
}

function testPositionValid(id) {
  return ($(id).selectedIndex != 0 );
 }

function testPass(id) {
  if ( $(id + "_0").checked) {
    return true;
  }
  else if ( $(id + "_1").checked) {
    return false;
  }
}

function testStart(id) {
  var check_month = /^[1-9]$|^[0][1-9]$|^[1][0-2]$/;  // Tests for 1-9, 01-09, and 10-12
  var check_day = /^[1-9]$|[1-2][0-9]$|^[3][0-1]$/;   // Tests for 1-9, 01-09, 10-31
  var check_year = /^[2]$[0-9]{3}$/;
  var in_month = $(id + '_0').value;
  var in_day = $(id + '_1').value;
  var in_year = $(id + '_2').value;

  var test_0 = check_month.test(in_month);
  var test_1 = check_day.test(in_day);
  var test_2 = check_year.test(in_year);

  if (test_0 && test_1 && test_1) {
    return true;
  }

}

function testPortfolio(id) {
  var str = $(id).value;
  var regExp = /(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/;
  if (str == "") {
    return true;
  }
  return regExp.test(str);
}
      
function testFileChange(id) {
  var regExp = /(doc|docx|pdf)$/g;
  var str = $(id).value;

  return regExp.test(str);
}
      
function testName(id) {
  var ck_name = /^[A-Za-z ]{1,20}$/;
  var name0 = $(id + '_0').value;
  var name1 = $(id + '_1').value;

  test_0 = ck_name.test(name0);
  test_1 = ck_name.test(name1);
  if (test_0 && test_1) {
    return true;
  }
}
      
function testEmail(id) {
  var ck_email = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.(com|org|net|ca)$/;
  var email = $(id).value;
  return ck_email.test(email);
}
       
function testPhone(id) {
  var check_phone0 = /[0-9]{3}$/;
  var check_phone1 = /[0-9]{4}$/;

  var tel0 = $(id + '_0').value;
  var tel1 = $(id + '_1').value;
  var tel2 = $(id + '_2').value;

  var test_0 = check_phone0.test(tel0);
  var test_1 = check_phone0.test(tel1);
  var test_2 = check_phone1.test(tel2);

  if (test_0 && test_1 && test_1) {
    return true;
  } 

}

function formValidate() {
  var anyFalse = false;
	if (!testPositionValid('selPosition')) {
    $('itemPosition').className='error';
    $('errPosition').innerHTML="You must select a position.";
    anyFalse = true;
  } else {
    $('itemPosition').className='';
    $('errPosition').innerHTML='';
  }
  if (!testStart('txtStartDate')) {
    $('posStart').className='error';
    $('errStart').innerHTML="You must enter a valid date.";
    anyFalse = true;
  } else {
    $('posStart').className='';
    $('errStart').innerHTML='';
  }
  if (!testPortfolio('txtPortfolio')) {
    $('portURL').className='error';
    $('errURL').innerHTML='Please enter a valid URL.';
  } else {
    $('portURL').className='';
    $('errURL').innerHTML='';
  }
  if (!testFileChange('fileResume')) {
    $('attachFile').className='error';
    $('errFile').innerHTML='Please submit a doc, dox, or pdf.';
    anyFalse = true;
  } else {
    $('attachFile').className='';
    $('errFile').innerHTML='';
  } 
  if (!testName('txtName')) {
    $('namePosition').className='error';
    $('errName').innerHTML='Please enter a valid name.';
    anyFalse = true;
  } else {
    $('namePosition').className='';
    $('errName').innerHTML='';
  }
  if (!testEmail('txtEmail')) {
    $('emailPosition').className='error';
    $('errEmail').innerHTML='You must enter a valid email address.';
    anyFalse = true;
  } else {
    $('emailPosition').className='';
    $('errEmail').innerHTML='';
  }
  if (!testPhone('txtPhone')) {
    $('phonePosition').className='error';
    $('errPhone').innerHTML='You must enter a valid phone number';
    anyFalse = true;
  } else {
    $('phonePosition').className='';
    $('errPhone').innerHTML='';
  }
  if (anyFalse) {   // If there are any false, the form will not submit
    return false;
  } else {
    return true;
  }
}


This post has been edited by Dormilich: 21 March 2013 - 11:19 PM


Is This A Good Question/Topic? 0
  • +

Replies To: Help with validating forms using php

#2 Atli  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 3730
  • View blog
  • Posts: 6,017
  • Joined: 08-June 10

Re: Help with validating forms using php

Posted 22 March 2013 - 10:05 AM

Hey.

So far, all your code does is open the text file (twice), copy the POST variables to global variables (which isn't a good idea!) and then print the global variable for the first name.

In order to complete this task, the first thing you need to learn is how to read in a text file line by line. There are two simple ways to do that: First is the file() function, which will read the whole file into an array, one line per element. However I wouldn't usually recommend that. Instead I'd recommend trying the fgets() function. It reads the next line from a file pointer opened by fopen() until the end of the file is reached. This is more efficient, but slightly more complex.

To begin with, try just creating a function that does this and prints each line in the file, one by one. Once you have that working, modify it so that it uses explode() on the line instead of printing it, and then print each part of the user information one by one. Once you have that working, compare each part of the user info to the info sent from the form, and print a message indicating the result.
Was This Post Helpful? 3
  • +
  • -

Page 1 of 1