Hi! I have lots of problems here. I have here my codes for form validations and my problems are after submitting and there were errors, the page must be return to the index and retain it's values. Also if user ID already exists, it should alert the user after filling the userID textbox not finishing all the boxes. I used wampserver and PHP my admin for this.
and here's my second page.
thank you very much and God Bless. Hope you could help me.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>UCPB Registration </title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="wrap">
<div id="header">
<div id="logo">
<h1>Welcome to UCPB!</h1>
</div>
<ul id="nav">
<li><a href="index.html">Home</a></li>
<li><a href="index.html">About us</a></li>
<li><a href="index.html">Services</a></li>
<li><a href="index.html">Register</a></li>
</ul>
</div>
<!-- /header -->
<div id="content">
<div class="side fl">
</div>
<div class="main fr">
<div id="text">
<p> <img src="images/img.jpg" alt="" /></p>
<p> <img src="images/img(2).jpg" alt="" /></p> <br />
<p> <img src="images/biz.jpg" alt="" /></p> <br />
<p> <img src="images/os.jpg" alt="" /></p> </div>
<div class="content">
<p align="left">
<form name="myForm" action ="2.php" method="post">
<table border="0">
<tr><td>
User ID:
</td><td><input type="text" name="userID" onchange="checkUserID(userID);" maxlength="20"/><br/>
<script language="javascript" type="text/javascript">
function checkUserID(userID) {
var re = /[^\w]/;
var ID = userID.value;
if (ID.length < 6 || ID.length > 20 || ID.match(re)) {
alert("User ID is invalid");
userID.focus();
userID.select();
return true;
}
}
</script>
</tr></td>
<tr><td>
Password:
</td><td><input type="password" name="password" onchange="checkPass(password);" size="21" maxlength="20"/><br/>
<script language="javascript" type="text/javascript">
function checkPass(password) {
var pass1 = password.value;
var lowerchar = /[a-z]/;
var upperchar = /[A-Z]/;
var nums = /[0-9]/;
if (pass1.length < 8 || pass1.length > 20 || !pass1.match(lowerchar) || !pass1.match(upperchar) || !pass1.match(nums)){
alert("Invalid Password! Should have atleast 1 uppercase , 1 lowercase letter \n 1 integer and 1 special character!");
password.focus();
password.select();
return true;
}
}
</script>
</tr></td>
<tr><td>
Confirm Password:
</td><td><input type="password" name="password2" onChange="checkPass2(password,password2);" size="21" maxlength="20"/> <br/>
<script language="javascript" type="text/javascript">
function checkPass2(password,password2) {
var pass1 = password.value;
var pass2 = password2.value;
if (pass1 != pass2) {
alert("Passwords are not matched!");
password2.focus();
password2.select();
return true;
}
}
</script>
</tr></td>
<tr><td>
Account Number:
</td><td><input type="text" name="accountnumber" onChange="checkAC(accountnumber);" maxlength="12"/><br/>
<script language="javascript" type="text/javascript">
function checkAC(accountnumber) {
var notNum = /[A-Za-z\D]/;
var AC = accountnumber.value;
if (AC.length !=12 || AC.match(notNum)) {
alert("Invalid Account Number!");
accountnumber.focus();
accountnumber.select();
return true;
}
}
</script>
</tr></td>
<tr><td>
<tr><td>
First Name:
</td><td><input type="text" name="firstname" onChange="checkFname(firstname);" maxlength="50"/><br/>
<script language="javascript" type="text/javascript">
function checkFname(firstname) {
var fname = firstname.value;
var nums = /[\d]/;
var char = /[A-Za-z]/;
if (fname.length < 2 || fname.length > 50 || nums.test(fname) || !char.test(fname)) {
alert("First Name is Invalid!.");
firstname.focus();
firstname.select();
return true;
}
}
</script>
</td></tr>
<tr><td>
Middle Name:
</td><td><input type="text" name="middlename" onChange="checkMname(middlename);" maxlength="50"/><br/>
<script language="javascript" type="text/javascript">
function checkMname(middlename) {
var mname = middlename.value;
var nums = /[\d]/;
var char = /[A-Za-z]/;
if (mname.length < 2 || mname.length > 50 || nums.test(mname) || !char.test(mname)) {
alert("Middle Name is Invalid!");
middlename.focus();
middlename.select();
return true;
}
}
</script>
</td></tr>
<tr><td>
Last Name:
</td><td><input type="text" name="lastname" onChange="checkLname(lastname);"/><br/>
<script language="javascript" type="text/javascript">
function checkLname(lastname) {
var lname = lastname.value;
var nums = /[\d]/;
var char = /[A-Za-z]/;
if (lname.length < 2 || lname.length > 50 || nums.test(lname) || !char.test(lname)) {
alert("Last Name is Invalid!");
lastname.focus();
lastname.select();
return true;
}
}
</script>
</td></tr>
<tr><td>
E-mail Address:
</td><td><input type="text" name="email" onChange="checkEmail(email);" maxlength="100"/><br/>
<script language="javascript" type="text/javascript">
function checkEmail(email) {
var mail = email.value;
var spxl_char = /^.+@.+\..{2,3}$/;
if (mail.length < 2 || mail.length > 100 || !mail.match(spxl_char)) {
alert("Invalid Email Address!");
email.focus();
email.select();
return true;
}
}
</script>
</tr></td>
<tr><td>
Gender:
</td><td>
<select name="gender" onChange="checkGender(gender);">
<option value="0">----</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
<script language="javascript" type="text/javascript">
function checkGender(gender){
var genderselect = gender.value;
if (genderselect == 0) {
alert("Please select your gender.");
gender.focus();
gender.select();
return true;
}
}
</script>
</select>
</tr></td>
<tr><td>
Birth Date:
</td><td>
<select name="month">
<option value="0">----</option>
<option value="January">January</option>
<option value="February">Febuary</option>
<option value="March">March</option>
<option value="April">April</option>
<option value="May">May</option>
<option value="June">June</option>
<option value="July">July</option>
<option value="August">August</option>
<option value="September">September</option>
<option value="October">October</option>
<option value="November">November</option>
<option value="December">December</option>
</select>
<select name="day" onChange="checkDate(month,day);">
<option value="0">----</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
<script language="javascript" type="text/javascript">
function checkDate(month,day){
var MM = month.value;
var DD = day.value;
var checker = "February";
var checker2 = "April";
var checker3 = "June";
var checker4 = "September";
var checker5 = "November";
if ((MM == checker) && (DD > 29)) {
alert("Invalid date, Kindly check your input!");
day.focus();
day.select();
return true;
}
else if((MM == checker2 || MM == checker3 || MM == checker4 || MM == checker5) && (DD > 30))
{
alert ("Invalid Date,Kindly check your input");
return true;
}
}
</script>
</select>
<select name="year" onChange="checkYear(month,day,year)">
<option value="0">--------</option>
<option value="2009">2009</option>
<option value="2008">2008</option>
<option value="2007">2007</option>
<option value="2006">2006</option>
<option value="2005">2005</option>
<option value="2004">2004</option>
<option value="2003">2003</option>
<option value="2002">2002</option>
<option value="2001">2001</option>
<option value="2000">2000</option>
<option value="1999">1999</option>
<option value="1998">1998</option>
<option value="1997">1997</option>
<option value="1996">1996</option>
<option value="1995">1995</option>
<option value="1994">1994</option>
<option value="1993">1993</option>
<option value="1992">1992</option>
<option value="1991">1991</option>
<option value="1990">1990</option>
<option value="1989">1989</option>
<option value="1988">1988</option>
<option value="1987">1987</option>
<option value="1986">1986</option>
<option value="1985">1985</option>
<option value="1984">1984</option>
<option value="1983">1983</option>
<option value="1982">1982</option>
<option value="1981">1981</option>
<option value="1980">1980</option>
<script language="javascript" type="text/javascript">
function checkYear(month,day,year)
{
var checker = "February";
MM = month.value;
DD = day.value;
YY = year.value;
var checkLY = YY%4;
if (MM == checker && DD > 28 && checkLY != 0)
{
alert("Unrecognize Leap Year, Please Check!");
year.focus();
year.select();
return true;
}
}
</script>
</select><br/>
<tr><td>
<input type="submit" value="Register"/>
</td></tr>
</tr></td>
</table>
</form>
</p>
</body>
</html>
and here's my second page.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>UCPB Registration </title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<form name="myForm" action ="3.php" method="post">
<div id="wrap">
<div id="header">
<div id="logo">
<h1>Welcome to UCPB!</h1>
</div>
<ul id="nav">
<li><a href="index.html">Home</a></li>
<li><a href="index.html">About us</a></li>
<li><a href="index.html">Services</a></li>
<li><a href="index.html">Register</a></li>
</ul>
</div>
<!-- /header -->
<div id="content">
<div class="side fl">
</div>
<div class="main fr">
<div id="text">
<p> <img src="images/img.jpg" alt="" /></p>
<p> <img src="images/img(2).jpg" alt="" /></p> <br />
<p> <img src="images/biz.jpg" alt="" /></p> <br />
<p> <img src="images/os.jpg" alt="" /></p> </div>
<div class="content">
<?php
$con = mysql_connect("localhost","root","");
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
mysql_select_db("ucpb", $con);
$userID = $_POST['userID'];
$password = $_POST['password'];
$email = $_POST['email'];
$accountnumber = $_POST['accountnumber'];
$firstname = $_POST['firstname'];
$middlename = $_POST['middlename'];
$lastname = $_POST['lastname'];
$sql="INSERT INTO tbl_register (userID, password, password2, accountnumber, firstname, middlename, lastname, email, gender, month, day, year)
VALUES
('$_POST[userID]','$_POST[password]', '$_POST[password2]' , '$_POST[accountnumber]', '$_POST[firstname]','$_POST[middlename]','$_POST[lastname]','$_POST[email]', '$_POST[gender]', '$_POST[month]', '$_POST[day]', '$_POST[year]')";
if(!$_POST['userID'] || !$_POST['password'] || !$_POST['password2'] || !$_POST['accountnumber']|| !$_POST['firstname'] || !$_POST['middlename'] ||!$_POST['lastname'] || !$_POST['email'] || !$_POST['gender'] || !$_POST['month'] || !$_POST['day'] || !$_POST['year'] ){
echo "<script language=\"JavaScript\">window.alert(\"All fields are required\");</script>";
exit;
} // --> eto ung if statement na nagchecheck kung meron ba laman lahat ng textboxes
$result1 = mysql_num_rows(mysql_query("SELECT * FROM tbl_register WHERE userID = '$userID' "));
$result2 = mysql_num_rows(mysql_query("SELECT * FROM tbl_register WHERE accountnumber = '$accountnumber' "));
if($result1 != 0){
echo "<script language=\"JavaScript\">window.alert(\"User ID is already in use!\");
</script>";
exit;
} // --> check if User Id is already in use!
else if($result2 != 0){
echo "<script language=\"JavaScript\">window.alert(\"Account Number is already in use!\");</script>";
exit;
} // --> check if Account Number is already in use!
else if (!preg_match("/[a-z0-9]$/i", $userID)){
echo "<script language=\"JavaScript\">window.alert(\"Invalid User Id!\");</script>";
return true;
}//--> User ID
else if (!preg_match("#.*^(?=.{8,20})(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*\W).*$#", $password)){
echo "<script language=\"JavaScript\">window.alert(\"Password is invalid!\");
</script>";
return true;
}
else if ($password != $_POST['password2']){
echo "<script language=\"JavaScript\">window.alert(\"Passwords are not matched\");</script>";
return true;
}
else if (preg_match("/[A-Za-z\D]/", $accountnumber)){
echo "<script language=\"JavaScript\">window.alert(\"Invalid Account Number!\");</script>";
return true;
}
// --> account number
else if (!preg_match("/[A-Za-z]/", $firstname) || preg_match("/[\d]/", $firstname) ){
echo "<script language=\"JavaScript\">window.alert(\"Invalid First Name!\");</script>";
return true;
}//-----> first name
else if (!preg_match("/[A-Za-z]/", $middlename) || preg_match("/[\d]/", $middlename) ){
echo "<script language=\"JavaScript\">window.alert(\"Invalid Middle Name!\");</script>";
return true;
}//-----> middle name
else if (!preg_match("/[A-Za-z]/", $lastname) || preg_match("/[\d]/", $lastname) ){
echo "<script language=\"JavaScript\">window.alert(\"Invalid Last Name!\");</script>";
return true;
}//-----> last name
else if(!preg_match("/^[[:alnum:]][a-z0-9_.-]*@[a-z0-9.-]+\.[a-z]{2,4}$/i", $email)){
echo "<script language=\"JavaScript\">window.alert(\"Invalid Email Address\");</script>";
return true;
}// --> check format ng email
if (!mysql_query($sql,$con))
{
die('Error: ' . mysql_error());
}
echo '
<form method="post" action="2.php">
<font face="arial" size="4">Congratulations!</font>
<table width="50%" border="0">
<tr>
<td><font size="3" >User ID is:</font></td>
<td>
<font size="3">'.$_POST['userID'].'</font><br></td>
</tr>
<tr>
<td><font size="3" >Password is:</font></td>
<td>
<font size="3">'.$_POST['password'].'</font><br></td>
</tr>
<tr>
<td><font size="3" >Account Number is:</font></td>
<td>
<font size="3">'.$_POST['accountnumber'].'</font><br></td>
</tr>
<tr>
<td><font size="3" >First Name is:</font></td>
<td>
<font size="3">'.$_POST['firstname'].'</font><br></td>
</tr>
<tr>
<td><font size="3" >Middle Name is:</font></td>
<td>
<font size="3">'.$_POST['middlename'].'</font><br></td>
</tr>
<tr>
<td><font size="3" >Last Name is:</font></td>
<td>
<font size="3">'.$_POST['lastname'].'</font><br></td>
</tr>
<tr>
<td><font size="3" >Email Address is:</font></td>
<td>
<font size="3">'.$_POST['email'].'</font><br></td>
</tr>
<tr>
<td><font size="3" >Gender is:</font></td>
<td>
<font size="3">'.$_POST['gender'].'</font><br></td>
</tr>
<tr>
<td><font size="3" >Birthday is:</font></td>
<td>
<font size="3">'.$_POST['month'].' '.$_POST['day'].' '.$_POST['year'].'</font>
</td>
</tr>
</table>
</form>';
mysql_close($con)
?>
</body>
</html>
Comment