PDA

View Full Version : Help with javascript and form validation


moe122
02-25-2008, 11:21 PM
Hi,
i need some help with writing some javascript for form validation, but am finding it a hard task. Could anyone help me? Hope to hear from anyone soon. Thankyou

mangofreak
02-26-2008, 04:44 AM
here is an extension that works very well for almost all your basic needs, and it is free:
http://www.yaromat.com/dw/?ex=Check%20Form%20MX

davidj
02-26-2008, 06:53 AM
the extension will do the trick

personally i would write the validation myself as the extension adds allot of ballast. You could write a more elegant function which will be bespoke to your requirements but each to their own and if that extension suits your needs then so be it.

give the extension a try and see what you think.

i will advise that if you have issues with the extension then please note i dont support or assist with these things. I would have to point you in the direction of the extension developer and their support services as they would provide a better support solution

edbr
02-26-2008, 06:54 AM
<SCRIPT LANGUAGE="JavaScript">


function validate_form ( )
{
valid = true;

if ( document.form1.email.value == "" )
{
alert ( "Please fill in your email address." );
valid = false;
}

}
return valid;

}
</script>
and in your form
<form action="mailsend.php" method="post" name="form1" id="form1" onsubmit="return validate_form ( );">change action and field names where nes. Dont rely only on this though, php validation as well is best

davidj
02-26-2008, 07:09 AM
hi ed

thanks for that but Moe wants a more advanced solution regarding string length, char recognition and email format validation.

its not a hard task so i still think that it should be done without relying on an extension but i suggest you give the extension ago

moe122
02-26-2008, 06:25 PM
Thnx 4 that people, and your right david i would rather write the code myself, and for that i need some help............david you willing to help? as you have an idea of what i need......

davidj
02-26-2008, 06:40 PM
OK

you need a javascript function

function validate(){

/// do stuff here

}


you need to grab the value of each field. You can do that using getElementById method


function validate(){

fld1 = document.getElementById('field_name').value;

}

so in the above example fld1 var will contain the value of the form field field_name

so you need to repeat the example above for each form field. Use this method to validate when you click the submit button (the validation will run first before the form is submitted. It will only submit if it passes the validation)

you can check each field value by using the following


function validate(){

fld1 = document.getElementById('field_name').value;

alert(fld1);
}


then change the submit button in your form to a standard button type and call the function by adding an onclick event to the button


onclick="validate()"


do this and test each field value is being alerted then we will move on to the validation

moe122
02-26-2008, 06:47 PM
the alert bit gives a popup right?would it be possible to get an error message like the one in php as soon as the user enters some data in a field?

so far ive done a validation for the length of certain field so ive got
1 numbers only
2 text (just text) only
3 contains @ for and email
4 certain field value is the same as another
so what would i do for them?

and i would like to say thanx again, i dont know what i would do without you (damn that was touching)

davidj
02-26-2008, 06:50 PM
there is a way to do what you want

follow my instruction as i give you and we will build your function step by step

moe122
02-26-2008, 06:54 PM
cool

so far my codes as follows

<?php
require_once("Connections/Connection.php"); // Database Connection
?>
<SCRIPT TYPE="text/javascript">
function checkform(){

/// get field value
fld1 = document.getElementById('Username').value;
fld2 = document.getElementById('Password').value;

/// detect length
if(fld1.length > 5 && fld2.length > 5){

/// submit form if greater than 6
document.forms[0].submit()

}else{

/// alert if not greater than 6
alert('Username/Password must contain atleast 6 characters');

}

}

</SCRIPT>
<?php
$First_Name = $_POST['First_Name'];
$Surname = $_POST['Surname'];
$Username = $_POST['Username'];
$Password = $_POST['Password'];
$Email = $_POST['Email'];
$Gender = $_POST['Gender'];
$Day = $_POST['Day'];
$Month = $_POST['Month'];
$Year = $_POST['Year'];
$Date_of_Birth = "$Year-$Month-$Day"; // << concatenate the date parts
$City = $_POST['City'];
$Region = $_POST['Region'];
$Country = $_POST['Country'];
$Postcode = $_POST['Postcode'];
$Religion = $_POST['Religion'];
$Ethnic_Origin = $_POST['Ethnic_Origin'];
$Occupation = $_POST['Occupation'];
$Marital_Status = $_POST['Marital_Status'];
$Number_of_Children = $_POST['Number_of_Children'];
$Phone_Number =$_POST['Phone_Number'];
$Submit = $_POST['Submit'];
$error = "One of your fields is empty !";
if($Submit && $First_Name && $Surname && $Username && $Password && $Email && $Gender && $Date_of_Birth && $City && $Region && $Country && $Postcode && $Religion && $Ethnic_Origin && $Phone_Number && $Marital_Status && $Number_of_Children && $Occupation){
/////
$query = sprintf("INSERT into clients (First_Name, Surname, Username, Password, Email, Gender, Date_of_Birth, City, Region, Country, Postcode, Religion, Ethnic_Origin, Phone_Number, Marital_Status, Number_of_Children, Occupation) values ('$First_Name', '$Surname', '$Username', '$Password', '$Email', '$Gender', '$Date_of_Birth', '$City', '$Region', '$Country', '$Postcode', '$Religion', '$Ethnic_Origin', '$Phone_Number', '$Marital_Status', '$Number_of_Children', '$Occupation')");
mysql_query ($query) or die (mysql_error());
/////
}elseif($Submit) {
echo $error;
}
/////
$query = sprintf("SELECT * FROM clients");
$result = @mysql_query($query);
$row = @mysql_fetch_array($result);
/////
?>
<!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>Form</title>
<style type="text/css">
<!--
.style1 {color: #000000}
.style5 {font-size: 24px}
-->
</style>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<table width="563" border="0" bordercolor="#FFFFFF">
<tr bordercolor="0">
<td colspan="3" bordercolor="1" bgcolor="#E4E4E4"><span class="style5">Personal Details</span></td>
</tr>
<tr bordercolor="0">
<td width="266" bgcolor="#F1F1F1"><span class="style1">First Name</span></td>
<td width="123" bgcolor="#FAFAFA"><label>
<input type="text" name="First_Name" id="First_Name" />
</label></td>
<td width="160" bgcolor="#FAFAFA">&nbsp;</td>
</tr>
<tr bordercolor="0">
<td bgcolor="#F1F1F1"><span class="style1">Surname</span></td>
<td bgcolor="#FAFAFA"><label>
<input type="text" name="Surname" id="Surname" />
</label></td>
<td bgcolor="#FAFAFA">&nbsp;</td>
</tr>
<tr bordercolor="0">
<td bgcolor="#F1F1F1"><span class="style1">Username</span></td>
<td bgcolor="#FAFAFA"><label>
<input type="text" name="Username" id="Username" />
</label></td>
<td bgcolor="#FAFAFA">&nbsp;</td>
</tr>
<tr bordercolor="0">
<td bgcolor="#F1F1F1">Password</td>
<td bgcolor="#FAFAFA"><label>
<input type="password" name="Password" id="Password" />
</label></td>
<td bgcolor="#FAFAFA">&nbsp;</td>
</tr>
<tr bordercolor="0">
<td bgcolor="#F1F1F1"><span class="style1">Verify Password</span></td>
<td bgcolor="#FAFAFA"><label>
<input type="password" name="Verify_Password" id="Verify_Password" />
</label></td>
<td bgcolor="#FAFAFA">&nbsp;</td>
</tr>
<tr bordercolor="0">
<td bgcolor="#F1F1F1"><span class="style1">Email Address</span></td>
<td bgcolor="#FAFAFA"><label>
<input type="text" name="Email" id="Email" />
</label></td>
<td bgcolor="#FAFAFA">&nbsp;</td>
</tr>
<tr bordercolor="0">
<td bgcolor="#F1F1F1"><span class="style1">Gender</span></td>
<td bgcolor="#FAFAFA"><label>
<select name="Gender" id="Gender">
<option>Male</option>
<option>Female</option>
</select>
</label></td>
<td bgcolor="#FAFAFA">&nbsp;</td>
</tr>
<tr bordercolor="0">
<td bgcolor="#F1F1F1"><span class="style1">Date of Birth</span></td>
<td bgcolor="#FAFAFA">Day
<select name="Day" id="Day">
<option selected="selected">01</option>
<option>02</option>
<option>03</option>
<option>04</option>
<option>05</option>
<option>06</option>
<option>07</option>
<option>08</option>
<option>09</option>
<option>10</option>
<option>11</option>
<option>12</option>
<option>13</option>
<option>14</option>
<option>15</option>
<option>16</option>
<option>17</option>
<option>18</option>
<option>19</option>
<option>20</option>
<option>21</option>
<option>22</option>
<option>23</option>
<option>24</option>
<option>25</option>
<option>26</option>
<option>27</option>
<option>28</option>
<option>29</option>
<option>30</option>
<option>31</option>
</select>
Month
<select name="Month" id="Month">
<option>01</option>
<option>02</option>
<option>03</option>
<option>04</option>
<option>05</option>
<option>06</option>
<option>07</option>
<option>08</option>
<option>09</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select>
Year
<input name="Year" type="text" id="Year" value="YYYY" size="2" maxlength="4" /></td>
<td bgcolor="#FAFAFA">&nbsp;</td>
</tr>
<tr bordercolor="0">
<td bgcolor="#F1F1F1"><span class="style1">City</span></td>
<td bgcolor="#FAFAFA"><label>
<input type="text" name="City" id="City" />
</label></td>
<td bgcolor="#FAFAFA">&nbsp;</td>
</tr>
<tr bordercolor="0">
<td bgcolor="#F1F1F1"><span class="style1">Region</span></td>
<td bgcolor="#FAFAFA"><label>
<input type="text" name="Region" id="Region" />
</label></td>
<td bgcolor="#FAFAFA">&nbsp;</td>
</tr>
<tr bordercolor="0">
<td bgcolor="#F1F1F1"><span class="style1">Country</span></td>
<td bgcolor="#FAFAFA"><label>
<select name="Country" id="Country">
<option>Afghanistan</option>
<option>Argentina</option>
<option>Australia</option>
<option>Austria</option>
<option>Bangladesh</option>
<option>Belgium</option>
<option>Bolivia</option>
<option>Brazil</option>
<option>Bulgaria</option>
<option>Canada</option>
<option>Chile</option>
<option>China</option>
<option>Colombia</option>
<option>Costa Rica</option>
<option>Croatia</option>
<option>Czech Republic</option>
<option>Denmark</option>
<option>Dominican Republic</option>
<option>Ecuador</option>
<option>Egypt</option>
<option>El Salvador</option>
<option>Estonia</option>
<option>Europe</option>
<option>Finland</option>
<option>France</option>
<option>Germany</option>
<option>Greece</option>
<option>Guatemala</option>
<option>Honduras</option>
<option>Hong Kong</option>
<option>Hungary</option>
<option>India</option>
<option>Indonesia</option>
<option>Iraq</option>
<option>Ireland</option>
<option>Israel</option>
<option>Italy</option>
<option>Jamaica</option>
<option>Japan</option>
<option>Jordan</option>
<option>Kenya</option>
<option>Korea</option>
<option>Kazakhstan</option>
<option>Latvia</option>
<option>Lithuania</option>
<option>Latin America</option>
<option>Luxembourg</option>
<option>Macedonia</option>
<option>Malaysia</option>
<option>Mexico</option>
<option>Moldova</option>
<option>Morocco</option>
<option>Netherlands</option>
<option>New Zealand</option>
<option>Norway</option>
<option>Pakistan</option>
<option>Panama</option>
<option>Paraguay</option>
<option>Peru</option>
<option>Philippines</option>
<option>Poland</option>
<option>Portugal</option>
<option>Puerto Rico</option>
<option>Romania</option>
<option>Russia</option>
<option>Saudi Arabia</option>
<option>Serbia and Montenegro</option>
<option>Singapore</option>
<option>Slovakia</option>
<option>Slovenia</option>
<option>South Africa</option>
<option>Spain</option>
<option>Sri Lanka</option>
<option>Sweden</option>
<option>Switzerland</option>
<option>Syria</option>
<option>Taiwan</option>
<option>Thailand</option>
<option>Trinidad and Tobago</option>
<option>Tunisia</option>
<option>Turkey</option>
<option>Ukraine</option>
<option>United Kingdom</option>
<option>United States</option>
<option>Uruguay</option>
<option>Venezuela</option>
<option>Vietnam</option>
<option>Other (Please Specify)</option>
</select>
</label></td>
<td bgcolor="#FAFAFA"><label>
<input type="text" name="Country_Other" id="Country_Other" />
</label></td>
</tr>
<tr bordercolor="0">
<td bgcolor="#F1F1F1"><span class="style1">Postcode</span></td>
<td bgcolor="#FAFAFA"><label>
<input type="text" name="Postcode" id="Postcode" />
</label></td>
<td bgcolor="#FAFAFA">&nbsp;</td>
</tr>
<tr bordercolor="0">
<td bgcolor="#F1F1F1"><span class="style1">Religion</span></td>
<td bgcolor="#FAFAFA"><label>
<select name="Religion" id="Religion">
<option>Sunni Hanafi</option>
<option>Sunni Humblie</option>
<option>Sunni Maliki</option>
<option>Sunni Shafi</option>
<option>Shia</option>
<option>Just a Muslim</option>
<option>Buddhism</option>
<option>Christianity</option>
<option>Judaism</option>
<option>Hinduism</option>
<option>Sikhism</option>
<option>Other (Please Specify)</option>
</select>
</label></td>
<td bgcolor="#FAFAFA"><label>
<input type="text" name="Religion_Other" id="Religion_Other" />
</label></td>
</tr>
<tr bordercolor="0">
<td bgcolor="#F1F1F1"><span class="style1">Ethnic Origin</span></td>
<td bgcolor="#FAFAFA"><label>
<select name="Ethnic_Origin" id="Ethnic_Origin">
<option>White English</option>
<option>White Irish</option>
<option>White Scottish</option>
<option>White Welsh</option>
<option>White Other</option>
<option>Asain Bangladeshi</option>
<option>Asain Indian</option>
<option>Asain Pakistani</option>
<option>Asain Other</option>
<option>Black African</option>
<option>Black Carribean</option>
<option>Black Other</option>
<option>Mixed (Please Specify)</option>
<option>Other (Please Specify)</option>
</select>
</label></td>
<td bgcolor="#FAFAFA"><label>
<input type="text" name="Ethnic Origin_Mixed_Other" id="Ethnic Origin_Mixed_Other" />
</label></td>
</tr>
<tr bordercolor="0">
<td bgcolor="#F1F1F1"><span class="style1">Occupation</span></td>
<td bgcolor="#FAFAFA"><label>
<input type="text" name="Occupation" id="Occupation" />
</label></td>
<td bgcolor="#FAFAFA">&nbsp;</td>
</tr>
<tr bordercolor="0">
<td bgcolor="#F1F1F1"><span class="style1">Marital Status</span></td>
<td bgcolor="#FAFAFA"><label>
<select name="Marital_Status" id="Marital_Status">
<option>Married</option>
<option>Single</option>
<option>Separated</option>
<option>Divorved</option>
<option>Widowed</option>
</select>
</label></td>
<td bgcolor="#FAFAFA">&nbsp;</td>
</tr>
<tr bordercolor="0">
<td bgcolor="#F1F1F1"><span class="style1">Number of Children (if any)</span></td>
<td bgcolor="#FAFAFA"><label>
<select name="Number_of_Children" id="Number_of_Children">
<option value="0">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="More than 5">More than 5</option>
</select>
</label></td>
<td bgcolor="#FAFAFA">&nbsp;</td>
</tr>
<tr bordercolor="0">
<td bgcolor="#F1F1F1"><span class="style1">Phone Number (will only be used by us to contact you and will not be shown to any third parties)</span></td>
<td bgcolor="#FAFAFA"><label>
<input type="text" name="Phone_Number" id="Phone_Number" />
</label></td>
<td bgcolor="#FAFAFA">&nbsp;</td>
</tr>
<tr bordercolor="0">
<td bordercolor="0" bgcolor="#F1F1F1">&nbsp;</td>
<td bordercolor="0" bgcolor="#FAFAFA"><label>
<input type="button" name="Submit" id="Submit" value="Submit" onClick="checkform()" />
<input name="Submit" type="hidden" id="Submit" value="1" />
</label></td>
<td bgcolor="#FAFAFA">&nbsp;</td>
</tr>
</table>
</form>
</body>
</html>

davidj
02-26-2008, 07:17 PM
ok


function checkform(){

/// 1 numbers only
/// 2 text (just text) only
/// 3 contains @ for and email
/// 4 certain field value is the same as another

/// get field value
fld1 = document.getElementById('Username').value;
fld2 = document.getElementById('Password').value;

/////////////////////////////////////////////
/// detect length first
if(fld1.length > 5 && fld2.length > 5){

pass1 = true;

}

////////////////////////////////////
if(isNaN(fld1)){

/// check value "Is Not A Number" which means its either alphas or a mix of both

pass2 = true;

}

//////////////////////////////////////
if(! isNaN(fld1)){

/// check value "Is Not A Number" or isNaN function but by using an ! you turn it around to the opposite result. which means it is a number

pass3 = true;

}

////////////////////////////////////
/// use the indexOf method to detect an @
detect = fld1.indexOf('@');

if(detect > 0){
/// an @ has been found
pass4 = true;

}

////////////////////////////////////
/// detect if fields are equal or match

if(fld1 == fld2){

pass5 = true;

}

/// if all the pass variable == true then {

/// submit the form here

}


}

moe122
02-26-2008, 08:12 PM
Well i've tried it but am getting errors on the page when viewing it as a webpage.....


<?php
require_once("Connections/Connection.php"); // Database Connection
?>
<SCRIPT TYPE="text/javascript">
function checkform(){

/// 1 numbers only
/// 2 text (just text) only
/// 3 contains @ for and email
/// 4 certain field value is the same as another

/// get field value
fld1 = document.getElementById('Username').value;
fld2 = document.getElementById('Password').value;
fld3 = document.getElementById('First_Name').value;
fld4 = document.getElementById('Surname').value;
fld5 = document.getElementById('Year').value;
fld6 = document.getElementById('Phone_Number').value;
fld7 = document.getElementById('Email').value;
fld8 = document.getElementById('Verify_Password').value;
/////////////////////////////////////////////
/// detect length first
if(fld1.length > 5 && fld2.length > 5){

pass1 = true;

}

////////////////////////////////////
if(isNaN(fld3 && fld4)){

/// check value "Is Not A Number" which means its either alphas or a mix of both

pass2 = true;

}

//////////////////////////////////////
if(! isNaN(fld5 && fld6)){

/// check value "Is Not A Number" or isNaN function but by using an ! you turn it around to the opposite result. which means it is a number

pass3 = true;

}

////////////////////////////////////
/// use the indexOf method to detect an @
detect = fld7.indexOf('@');

if(detect > 0){
/// an @ has been found
pass4 = true;

}

////////////////////////////////////
/// detect if fields are equal or match

if(fld2 == fld8){

pass5 = true;

}

/// if all the pass variable == true then {

/// submit the form here

}else{

/// alert if not greater than 6
alert('Username/Password must contain atleast 6 characters');

}

}

</SCRIPT>
<?php
$First_Name = $_POST['First_Name'];
$Surname = $_POST['Surname'];
$Username = $_POST['Username'];
$Password = $_POST['Password'];
$Email = $_POST['Email'];
$Gender = $_POST['Gender'];
$Day = $_POST['Day'];
$Month = $_POST['Month'];
$Year = $_POST['Year'];
$Date_of_Birth = "$Year-$Month-$Day"; // << concatenate the date parts
$City = $_POST['City'];
$Region = $_POST['Region'];
$Country = $_POST['Country'];
$Postcode = $_POST['Postcode'];
$Religion = $_POST['Religion'];
$Ethnic_Origin = $_POST['Ethnic_Origin'];
$Occupation = $_POST['Occupation'];
$Marital_Status = $_POST['Marital_Status'];
$Number_of_Children = $_POST['Number_of_Children'];
$Phone_Number =$_POST['Phone_Number'];
$Submit = $_POST['Submit'];
$error = "One of your fields is empty !";
if($Submit && $First_Name && $Surname && $Username && $Password && $Email && $Gender && $Date_of_Birth && $City && $Region && $Country && $Postcode && $Religion && $Ethnic_Origin && $Phone_Number && $Marital_Status && $Number_of_Children && $Occupation){
/////
$query = sprintf("INSERT into clients (First_Name, Surname, Username, Password, Email, Gender, Date_of_Birth, City, Region, Country, Postcode, Religion, Ethnic_Origin, Phone_Number, Marital_Status, Number_of_Children, Occupation) values ('$First_Name', '$Surname', '$Username', '$Password', '$Email', '$Gender', '$Date_of_Birth', '$City', '$Region', '$Country', '$Postcode', '$Religion', '$Ethnic_Origin', '$Phone_Number', '$Marital_Status', '$Number_of_Children', '$Occupation')");
mysql_query ($query) or die (mysql_error());
/////
}elseif($Submit) {
echo $error;
}
/////
$query = sprintf("SELECT * FROM clients");
$result = @mysql_query($query);
$row = @mysql_fetch_array($result);
/////
?>
<!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>Form</title>
<style type="text/css">
<!--
.style1 {color: #000000}
.style5 {font-size: 24px}
-->
</style>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<table width="563" border="0" bordercolor="#FFFFFF">
<tr bordercolor="0">
<td colspan="3" bordercolor="1" bgcolor="#E4E4E4"><span class="style5">Personal Details</span></td>
</tr>
<tr bordercolor="0">
<td width="228" bgcolor="#F1F1F1"><span class="style1">First Name</span></td>
<td width="172" bgcolor="#FAFAFA"><label>
<input type="text" name="First_Name" id="First_Name" />
</label></td>
<td width="149" bgcolor="#FAFAFA">&nbsp;</td>
</tr>
<tr bordercolor="0">
<td bgcolor="#F1F1F1"><span class="style1">Surname</span></td>
<td bgcolor="#FAFAFA"><label>
<input type="text" name="Surname" id="Surname" />
</label></td>
<td bgcolor="#FAFAFA">&nbsp;</td>
</tr>
<tr bordercolor="0">
<td bgcolor="#F1F1F1"><span class="style1">Username</span></td>
<td bgcolor="#FAFAFA"><label>
<input type="text" name="Username" id="Username" />
</label></td>
<td bgcolor="#FAFAFA">&nbsp;</td>
</tr>
<tr bordercolor="0">
<td bgcolor="#F1F1F1">Password</td>
<td bgcolor="#FAFAFA"><label>
<input type="password" name="Password" id="Password" />
</label></td>
<td bgcolor="#FAFAFA">&nbsp;</td>
</tr>
<tr bordercolor="0">
<td bgcolor="#F1F1F1"><span class="style1">Verify Password</span></td>
<td bgcolor="#FAFAFA"><label>
<input type="password" name="Verify_Password" id="Verify_Password" />
</label></td>
<td bgcolor="#FAFAFA">&nbsp;</td>
</tr>
<tr bordercolor="0">
<td bgcolor="#F1F1F1"><span class="style1">Email Address</span></td>
<td bgcolor="#FAFAFA"><label>
<input type="text" name="Email" id="Email" />
</label></td>
<td bgcolor="#FAFAFA">&nbsp;</td>
</tr>
<tr bordercolor="0">
<td bgcolor="#F1F1F1"><span class="style1">Gender</span></td>
<td bgcolor="#FAFAFA"><label>
<select name="Gender" id="Gender">
<option>Male</option>
<option>Female</option>
</select>
</label></td>
<td bgcolor="#FAFAFA">&nbsp;</td>
</tr>
<tr bordercolor="0">
<td bgcolor="#F1F1F1"><span class="style1">Date of Birth</span></td>
<td bgcolor="#FAFAFA">Day
<select name="Day" id="Day">
<option selected="selected">01</option>
<option>02</option>
<option>03</option>
<option>04</option>
<option>05</option>
<option>06</option>
<option>07</option>
<option>08</option>
<option>09</option>
<option>10</option>
<option>11</option>
<option>12</option>
<option>13</option>
<option>14</option>
<option>15</option>
<option>16</option>
<option>17</option>
<option>18</option>
<option>19</option>
<option>20</option>
<option>21</option>
<option>22</option>
<option>23</option>
<option>24</option>
<option>25</option>
<option>26</option>
<option>27</option>
<option>28</option>
<option>29</option>
<option>30</option>
<option>31</option>
</select>
Month
<select name="Month" id="Month">
<option>01</option>
<option>02</option>
<option>03</option>
<option>04</option>
<option>05</option>
<option>06</option>
<option>07</option>
<option>08</option>
<option>09</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select>
Year
<input name="Year" type="text" id="Year" value="YYYY" size="2" maxlength="4" /></td>
<td bgcolor="#FAFAFA">&nbsp;</td>
</tr>
<tr bordercolor="0">
<td bgcolor="#F1F1F1"><span class="style1">City</span></td>
<td bgcolor="#FAFAFA"><label>
<input type="text" name="City" id="City" />
</label></td>
<td bgcolor="#FAFAFA">&nbsp;</td>
</tr>
<tr bordercolor="0">
<td bgcolor="#F1F1F1"><span class="style1">Region</span></td>
<td bgcolor="#FAFAFA"><label>
<input type="text" name="Region" id="Region" />
</label></td>
<td bgcolor="#FAFAFA">&nbsp;</td>
</tr>
<tr bordercolor="0">
<td bgcolor="#F1F1F1"><span class="style1">Country</span></td>
<td bgcolor="#FAFAFA"><label>
<select name="Country" id="Country">
<option>Afghanistan</option>
<option>Argentina</option>
<option>Australia</option>
<option>Austria</option>
<option>Bangladesh</option>
<option>Belgium</option>
<option>Bolivia</option>
<option>Brazil</option>
<option>Bulgaria</option>
<option>Canada</option>
<option>Chile</option>
<option>China</option>
<option>Colombia</option>
<option>Costa Rica</option>
<option>Croatia</option>
<option>Czech Republic</option>
<option>Denmark</option>
<option>Dominican Republic</option>
<option>Ecuador</option>
<option>Egypt</option>
<option>El Salvador</option>
<option>Estonia</option>
<option>Europe</option>
<option>Finland</option>
<option>France</option>
<option>Germany</option>
<option>Greece</option>
<option>Guatemala</option>
<option>Honduras</option>
<option>Hong Kong</option>
<option>Hungary</option>
<option>India</option>
<option>Indonesia</option>
<option>Iraq</option>
<option>Ireland</option>
<option>Israel</option>
<option>Italy</option>
<option>Jamaica</option>
<option>Japan</option>
<option>Jordan</option>
<option>Kenya</option>
<option>Korea</option>
<option>Kazakhstan</option>
<option>Latvia</option>
<option>Lithuania</option>
<option>Latin America</option>
<option>Luxembourg</option>
<option>Macedonia</option>
<option>Malaysia</option>
<option>Mexico</option>
<option>Moldova</option>
<option>Morocco</option>
<option>Netherlands</option>
<option>New Zealand</option>
<option>Norway</option>
<option>Pakistan</option>
<option>Panama</option>
<option>Paraguay</option>
<option>Peru</option>
<option>Philippines</option>
<option>Poland</option>
<option>Portugal</option>
<option>Puerto Rico</option>
<option>Romania</option>
<option>Russia</option>
<option>Saudi Arabia</option>
<option>Serbia and Montenegro</option>
<option>Singapore</option>
<option>Slovakia</option>
<option>Slovenia</option>
<option>South Africa</option>
<option>Spain</option>
<option>Sri Lanka</option>
<option>Sweden</option>
<option>Switzerland</option>
<option>Syria</option>
<option>Taiwan</option>
<option>Thailand</option>
<option>Trinidad and Tobago</option>
<option>Tunisia</option>
<option>Turkey</option>
<option>Ukraine</option>
<option>United Kingdom</option>
<option>United States</option>
<option>Uruguay</option>
<option>Venezuela</option>
<option>Vietnam</option>
<option>Other (Please Specify)</option>
</select>
</label></td>
<td bgcolor="#FAFAFA"><label>
<input type="text" name="Country_Other" id="Country_Other" />
</label></td>
</tr>
<tr bordercolor="0">
<td bgcolor="#F1F1F1"><span class="style1">Postcode</span></td>
<td bgcolor="#FAFAFA"><label>
<input type="text" name="Postcode" id="Postcode" />
</label></td>
<td bgcolor="#FAFAFA">&nbsp;</td>
</tr>
<tr bordercolor="0">
<td bgcolor="#F1F1F1"><span class="style1">Religion</span></td>
<td bgcolor="#FAFAFA"><label>
<select name="Religion" id="Religion">
<option>Sunni Hanafi</option>
<option>Sunni Humblie</option>
<option>Sunni Maliki</option>
<option>Sunni Shafi</option>
<option>Shia</option>
<option>Just a Muslim</option>
<option>Buddhism</option>
<option>Christianity</option>
<option>Judaism</option>
<option>Hinduism</option>
<option>Sikhism</option>
<option>Other (Please Specify)</option>
</select>
</label></td>
<td bgcolor="#FAFAFA"><label>
<input type="text" name="Religion_Other" id="Religion_Other" />
</label></td>
</tr>
<tr bordercolor="0">
<td bgcolor="#F1F1F1"><span class="style1">Ethnic Origin</span></td>
<td bgcolor="#FAFAFA"><label>
<select name="Ethnic_Origin" id="Ethnic_Origin">
<option>White English</option>
<option>White Irish</option>
<option>White Scottish</option>
<option>White Welsh</option>
<option>White Other</option>
<option>Asain Bangladeshi</option>
<option>Asain Indian</option>
<option>Asain Pakistani</option>
<option>Asain Other</option>
<option>Black African</option>
<option>Black Carribean</option>
<option>Black Other</option>
<option>Mixed (Please Specify)</option>
<option>Other (Please Specify)</option>
</select>
</label></td>
<td bgcolor="#FAFAFA"><label>
<input type="text" name="Ethnic Origin_Mixed_Other" id="Ethnic Origin_Mixed_Other" />
</label></td>
</tr>
<tr bordercolor="0">
<td bgcolor="#F1F1F1"><span class="style1">Occupation</span></td>
<td bgcolor="#FAFAFA"><label>
<input type="text" name="Occupation" id="Occupation" />
</label></td>
<td bgcolor="#FAFAFA">&nbsp;</td>
</tr>
<tr bordercolor="0">
<td bgcolor="#F1F1F1"><span class="style1">Marital Status</span></td>
<td bgcolor="#FAFAFA"><label>
<select name="Marital_Status" id="Marital_Status">
<option>Married</option>
<option>Single</option>
<option>Separated</option>
<option>Divorved</option>
<option>Widowed</option>
</select>
</label></td>
<td bgcolor="#FAFAFA">&nbsp;</td>
</tr>
<tr bordercolor="0">
<td bgcolor="#F1F1F1"><span class="style1">Number of Children (if any)</span></td>
<td bgcolor="#FAFAFA"><label>
<select name="Number_of_Children" id="Number_of_Children">
<option value="0">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="More than 5">More than 5</option>
</select>
</label></td>
<td bgcolor="#FAFAFA">&nbsp;</td>
</tr>
<tr bordercolor="0">
<td bgcolor="#F1F1F1"><span class="style1">Phone Number (will only be used by us to contact you and will not be shown to any third parties)</span></td>
<td bgcolor="#FAFAFA"><label>
<input type="text" name="Phone_Number" id="Phone_Number" />
</label></td>
<td bgcolor="#FAFAFA">&nbsp;</td>
</tr>
<tr bordercolor="0">
<td bordercolor="0" bgcolor="#F1F1F1">&nbsp;</td>
<td bordercolor="0" bgcolor="#FAFAFA"><label>
<input type="button" name="Submit" id="Submit" value="Submit" onClick="checkform()" />
<input name="Submit" type="hidden" id="Submit" value="1" />
</label></td>
<td bgcolor="#FAFAFA">&nbsp;</td>
</tr>
</table>
</form>
</body>
</html>

moe122
02-26-2008, 08:24 PM
i've just got rid of the else statemet in javascript and also moved my php variables above my java and now have no erors on the page but when i click on submit nothing happens?


<?php
require_once("Connections/Connection.php"); // Database Connection
$First_Name = $_POST['First_Name'];
$Surname = $_POST['Surname'];
$Username = $_POST['Username'];
$Password = $_POST['Password'];
$Email = $_POST['Email'];
$Gender = $_POST['Gender'];
$Day = $_POST['Day'];
$Month = $_POST['Month'];
$Year = $_POST['Year'];
$Date_of_Birth = "$Year-$Month-$Day"; // << concatenate the date parts
$City = $_POST['City'];
$Region = $_POST['Region'];
$Country = $_POST['Country'];
$Postcode = $_POST['Postcode'];
$Religion = $_POST['Religion'];
$Ethnic_Origin = $_POST['Ethnic_Origin'];
$Occupation = $_POST['Occupation'];
$Marital_Status = $_POST['Marital_Status'];
$Number_of_Children = $_POST['Number_of_Children'];
$Phone_Number =$_POST['Phone_Number'];
$Submit = $_POST['Submit'];
$error = "One of your fields is empty !";
?>
<SCRIPT TYPE="text/javascript">
function checkform(){

/// 1 numbers only
/// 2 text (just text) only
/// 3 contains @ for and email
/// 4 certain field value is the same as another

/// get field value
fld1 = document.getElementById('Username').value;
fld2 = document.getElementById('Password').value;
fld3 = document.getElementById('First_Name').value;
fld4 = document.getElementById('Surname').value;
fld5 = document.getElementById('Year').value;
fld6 = document.getElementById('Phone_Number').value;
fld7 = document.getElementById('Email').value;
fld8 = document.getElementById('Verify_Password').value;
/////////////////////////////////////////////
/// detect length first
if(fld1.length > 5 && fld2.length > 5){

pass1 = true;

}

////////////////////////////////////
if(isNaN(fld3 && fld4)){

/// check value "Is Not A Number" which means its either alphas or a mix of both

pass2 = true;

}

//////////////////////////////////////
if(! isNaN(fld5 && fld6)){

/// check value "Is Not A Number" or isNaN function but by using an ! you turn it around to the opposite result. which means it is a number

pass3 = true;

}

////////////////////////////////////
/// use the indexOf method to detect an @
detect = fld7.indexOf('@');

if(detect > 0){
/// an @ has been found
pass4 = true;

}

////////////////////////////////////
/// detect if fields are equal or match

if(fld2 == fld8){

pass5 = true;

}

/// if all the pass variable == true then {

/// submit the form here

}
</SCRIPT>
<?php
if($Submit && $First_Name && $Surname && $Username && $Password && $Email && $Gender && $Date_of_Birth && $City && $Region && $Country && $Postcode && $Religion && $Ethnic_Origin && $Phone_Number && $Marital_Status && $Number_of_Children && $Occupation){
/////
$query = sprintf("INSERT into clients (First_Name, Surname, Username, Password, Email, Gender, Date_of_Birth, City, Region, Country, Postcode, Religion, Ethnic_Origin, Phone_Number, Marital_Status, Number_of_Children, Occupation) values ('$First_Name', '$Surname', '$Username', '$Password', '$Email', '$Gender', '$Date_of_Birth', '$City', '$Region', '$Country', '$Postcode', '$Religion', '$Ethnic_Origin', '$Phone_Number', '$Marital_Status', '$Number_of_Children', '$Occupation')");
mysql_query ($query) or die (mysql_error());
/////
}elseif($Submit) {
echo $error;
}
/////
$query = sprintf("SELECT * FROM clients");
$result = @mysql_query($query);
$row = @mysql_fetch_array($result);
/////
?>

<style type="text/css">
<!--
.style5 {font-size: 24px}
.style1 {color: #000000}
-->
</style>
<form id="form1" name="form1" method="post" action="">
<table width="562" border="0">
<tr>
<td colspan="3" bgcolor="#E4E4E4"><span class="style5">Personal Details</span></td>
</tr>
<tr>
<td width="219" bgcolor="#F1F1F1"><span class="style1">First Name</span></td>
<td width="183" bgcolor="#FAFAFA"><input type="text" name="First_Name" id="First_Name" /></td>
<td width="138" bgcolor="#FAFAFA">&nbsp;</td>
</tr>
<tr>
<td bgcolor="#F1F1F1"><span class="style1">Surname</span></td>
<td bgcolor="#FAFAFA"><input type="text" name="Surname" id="Surname" /></td>
<td bgcolor="#FAFAFA">&nbsp;</td>
</tr>
<tr>
<td bgcolor="#F1F1F1"><span class="style1">Username</span></td>
<td bgcolor="#FAFAFA"><input type="text" name="Username" id="Username" /></td>
<td bgcolor="#FAFAFA">&nbsp;</td>
</tr>
<tr>
<td bgcolor="#F1F1F1">Password</td>
<td bgcolor="#FAFAFA"><input type="password" name="Password" id="Password" /></td>
<td bgcolor="#FAFAFA">&nbsp;</td>
</tr>
<tr>
<td bgcolor="#F1F1F1"><span class="style1">Verify Password</span></td>
<td bgcolor="#FAFAFA"><input type="password" name="Verify_Password" id="Verify_Password" /></td>
<td bgcolor="#FAFAFA">&nbsp;</td>
</tr>
<tr>
<td bgcolor="#F1F1F1"><span class="style1">Email Address</span></td>
<td bgcolor="#FAFAFA"><input type="text" name="Email" id="Email" /></td>
<td bgcolor="#FAFAFA">&nbsp;</td>
</tr>
<tr>
<td bgcolor="#F1F1F1"><span class="style1">Gender</span></td>
<td bgcolor="#FAFAFA"><select name="Gender" id="Gender">
<option>Male</option>
<option>Female</option>
</select></td>
<td bgcolor="#FAFAFA">&nbsp;</td>
</tr>
<tr>
<td bgcolor="#F1F1F1"><span class="style1">Date of Birth</span></td>
<td bgcolor="#FAFAFA">Day
<select name="Day" id="Day">
<option>01</option>
<option>02</option>
<option>03</option>
<option>04</option>
<option>05</option>
<option>06</option>
<option>07</option>
<option>08</option>
<option>09</option>
<option>10</option>
<option>11</option>
<option>12</option>
<option>13</option>
<option>14</option>
<option>15</option>
<option>16</option>
<option>17</option>
<option>18</option>
<option>19</option>
<option>20</option>
<option>21</option>
<option>22</option>
<option>23</option>
<option>24</option>
<option>25</option>
<option>26</option>
<option>27</option>
<option>28</option>
<option>29</option>
<option>30</option>
<option>31</option>
</select>
Month
<select name="Month" id="Month">
<option>01</option>
<option>02</option>
<option>03</option>
<option>04</option>
<option>05</option>
<option>06</option>
<option>07</option>
<option>08</option>
<option>09</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select>
Year
<input name="Year" type="text" id="Year" value="YYYY" size="2" maxlength="4" /></td>
<td bgcolor="#FAFAFA">&nbsp;</td>
</tr>
<tr>
<td bgcolor="#F1F1F1"><span class="style1">City</span></td>
<td bgcolor="#FAFAFA"><input type="text" name="City" id="City" /></td>
<td bgcolor="#FAFAFA">&nbsp;</td>
</tr>
<tr>
<td bgcolor="#F1F1F1"><span class="style1">Region</span></td>
<td bgcolor="#FAFAFA"><input type="text" name="Region" id="Region" /></td>
<td bgcolor="#FAFAFA">&nbsp;</td>
</tr>
<tr>
<td bgcolor="#F1F1F1"><span class="style1">Country</span></td>
<td bgcolor="#FAFAFA"><select name="Country" id="Country">
<option>Afghanistan</option>
<option>Argentina</option>
<option>Australia</option>
<option>Austria</option>
<option>Bangladesh</option>
<option>Belgium</option>
<option>Bolivia</option>
<option>Brazil</option>
<option>Bulgaria</option>
<option>Canada</option>
<option>Chile</option>
<option>China</option>
<option>Colombia</option>
<option>Costa Rica</option>
<option>Croatia</option>
<option>Czech Republic</option>
<option>Denmark</option>
<option>Dominican Republic</option>
<option>Ecuador</option>
<option>Egypt</option>
<option>El Salvador</option>
<option>Estonia</option>
<option>Europe</option>
<option>Finland</option>
<option>France</option>
<option>Germany</option>
<option>Greece</option>
<option>Guatemala</option>
<option>Honduras</option>
<option>Hong Kong</option>
<option>Hungary</option>
<option>India</option>
<option>Indonesia</option>
<option>Iraq</option>
<option>Ireland</option>
<option>Israel</option>
<option>Italy</option>
<option>Jamaica</option>
<option>Japan</option>
<option>Jordan</option>
<option>Kenya</option>
<option>Korea</option>
<option>Kazakhstan</option>
<option>Latvia</option>
<option>Lithuania</option>
<option>Latin America</option>
<option>Luxembourg</option>
<option>Macedonia</option>
<option>Malaysia</option>
<option>Mexico</option>
<option>Moldova</option>
<option>Morocco</option>
<option>Netherlands</option>
<option>New Zealand</option>
<option>Norway</option>
<option>Pakistan</option>
<option>Panama</option>
<option>Paraguay</option>
<option>Peru</option>
<option>Philippines</option>
<option>Poland</option>
<option>Portugal</option>
<option>Puerto Rico</option>
<option>Romania</option>
<option>Russia</option>
<option>Saudi Arabia</option>
<option>Serbia and Montenegro</option>
<option>Singapore</option>
<option>Slovakia</option>
<option>Slovenia</option>
<option>South Africa</option>
<option>Spain</option>
<option>Sri Lanka</option>
<option>Sweden</option>
<option>Switzerland</option>
<option>Syria</option>
<option>Taiwan</option>
<option>Thailand</option>
<option>Trinidad and Tobago</option>
<option>Tunisia</option>
<option>Turkey</option>
<option>Ukraine</option>
<option>United Kingdom</option>
<option>United States</option>
<option>Uruguay</option>
<option>Venezuela</option>
<option>Vietnam</option>
<option>Other (Please Specify)</option>
</select></td>
<td bgcolor="#FAFAFA"><input type="text" name="Country_Other" id="Country_Other" /></td>
</tr>
<tr>
<td bgcolor="#F1F1F1"><span class="style1">Postcode</span></td>
<td bgcolor="#FAFAFA"><input type="text" name="Postcode" id="Postcode" /></td>
<td bgcolor="#FAFAFA">&nbsp;</td>
</tr>
<tr>
<td bgcolor="#F1F1F1"><span class="style1">Religion</span></td>
<td bgcolor="#FAFAFA"><select name="Religion" id="Religion">
<option>Sunni Hanafi</option>
<option>Sunni Humblie</option>
<option>Sunni Maliki</option>
<option>Sunni Shafi</option>
<option>Shia</option>
<option>Just a Muslim</option>
<option>Buddhism</option>
<option>Christianity</option>
<option>Judaism</option>
<option>Hinduism</option>
<option>Sikhism</option>
<option>Other (Please Specify)</option>
</select></td>
<td bgcolor="#FAFAFA"><input type="text" name="Religion_Other" id="Religion_Other" /></td>
</tr>
<tr>
<td bgcolor="#F1F1F1"><span class="style1">Ethnic Origin</span></td>
<td bgcolor="#FAFAFA"><select name="Ethnic_Origin" id="Ethnic_Origin">
<option>White English</option>
<option>White Irish</option>
<option>White Scottish</option>
<option>White Welsh</option>
<option>White Other</option>
<option>Asain Bangladeshi</option>
<option>Asain Indian</option>
<option>Asain Pakistani</option>
<option>Asain Other</option>
<option>Black African</option>
<option>Black Carribean</option>
<option>Black Other</option>
<option>Mixed (Please Specify)</option>
<option>Other (Please Specify)</option>
</select></td>
<td bgcolor="#FAFAFA"><input type="text" name="Ethnic Origin_Mixed_Other" id="Ethnic Origin_Mixed_Other" /></td>
</tr>
<tr>
<td bgcolor="#F1F1F1"><span class="style1">Occupation</span></td>
<td bgcolor="#FAFAFA"><input type="text" name="Occupation" id="Occupation" /></td>
<td bgcolor="#FAFAFA">&nbsp;</td>
</tr>
<tr>
<td bgcolor="#F1F1F1"><span class="style1">Marital Status</span></td>
<td bgcolor="#FAFAFA"><select name="Marital_Status" id="Marital_Status">
<option>Married</option>
<option>Single</option>
<option>Separated</option>
<option>Divorved</option>
<option>Widowed</option>
</select></td>
<td bgcolor="#FAFAFA">&nbsp;</td>
</tr>
<tr>
<td bgcolor="#F1F1F1"><span class="style1">Number of Children (if any)</span></td>
<td bgcolor="#FAFAFA"><select name="Number_of_Children" id="Number_of_Children">
<option value="0">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="More than 5">More than 5</option>
</select></td>
<td bgcolor="#FAFAFA">&nbsp;</td>
</tr>
<tr>
<td bgcolor="#F1F1F1"><span class="style1">Phone Number (will only be used by us to contact you and will not be shown to any third parties)</span></td>
<td bgcolor="#FAFAFA"><input type="text" name="Phone_Number" id="Phone_Number" /></td>
<td bgcolor="#FAFAFA">&nbsp;</td>
</tr>
<tr>
<td bgcolor="#F1F1F1">&nbsp;</td>
<td bgcolor="#FAFAFA"><input type="button" name="Submit" id="Submit" value="Submit" onclick="checkform()" />
<input name="Submit" type="hidden" id="Submit" value="1" /></td>
<td bgcolor="#FAFAFA">&nbsp;</td>
</tr>
</table>
</form>

davidj
02-26-2008, 08:57 PM
OK

first mistake is your javascript is located in the wrong place...

you should know at this level where your JS should live (inside the <head> tags)

second

your drop downs don't have a value attribute so they are going to be empty when you submit the form

third

please stop PM-ing me to tell me you have posted another question or that you have not received a reply in the last 10 minutes. It gives the impression that your banging on my door for answers. Don't do it again

forth

if you make basic mistakes now and i catch them and clean them up for you how will you learn? I will throw you a life preserver but i cant just jump in the water and pull you out anymore. Please understand

fifth

here is your working function


<SCRIPT TYPE="text/javascript">
function checkform(){

/// 1 numbers only
/// 2 text (just text) only
/// 3 contains @ for and email
/// 4 certain field value is the same as another

/// get field value
fld1 = document.getElementById('Username').value;
fld2 = document.getElementById('Password').value;
fld3 = document.getElementById('First_Name').value;
fld4 = document.getElementById('Surname').value;
fld5 = document.getElementById('Year').value;
fld6 = document.getElementById('Phone_Number').value;
fld7 = document.getElementById('Email').value;
fld8 = document.getElementById('Verify_Password').value;
/////////////////////////////////////////////
/// detect length first
if(fld1.length > 5 && fld2.length > 5){

alert('aa');

pass1 = true;

}

////////////////////////////////////
if(isNaN(fld3 && fld4)){

/// check value "Is Not A Number" which means its either alphas or a mix of both

pass2 = true;

}

//////////////////////////////////////
if(! isNaN(fld5 && fld6)){

/// check value "Is Not A Number" or isNaN function but by using an ! you turn it around to the opposite result. which means it is a number

pass3 = true;

}

////////////////////////////////////
/// use the indexOf method to detect an @
detect = fld7.indexOf('@');

if(detect > 0){
/// an @ has been found
pass4 = true;

}

////////////////////////////////////
/// detect if fields are equal or match

if(fld2 == fld8){

pass5 = true;


}

if(pass1 && pass2 && pass3 && pass4 && pass5){

document.forms[0].submit();

}

}

</SCRIPT>


sixth

use code tags in your posts when posting code

im tired of tidying up after you

bet your parents are on your case allot too

davidj
02-26-2008, 09:21 PM
additional

where you have...


if(isNaN(fld3 && fld4))


needs to be...


if(isNaN(fld3) && isNaN(fld4))

moe122
02-26-2008, 09:49 PM
i've done the what you've said but now get the error that 'pass1 is undefined' when viewing the webpage?

davidj
02-26-2008, 09:57 PM
ok my fault

you need to declare your vars first

inside the function near the top you need the following


function checkform(){

var pass1;
var pass2;

etc ....

moe122
02-26-2008, 10:21 PM
ok still got the problem with the submit button....nothing happens when i click it?

davidj
02-26-2008, 10:23 PM
so does this mean that your validation is working ????

check your fields and data

add alerts to find where your validation is falling over or succeeding

this is where you have to debug your code

moe122
02-26-2008, 10:39 PM
ok i get 'cc' and 'ee' corresponding to my function below

function checkform(){
var pass1;
var pass2;
var pass3;
var pass4;
var pass5;
/// 1 numbers only
/// 2 text (just text) only
/// 3 contains @ for and email
/// 4 certain field value is the same as another

/// get field value
fld1 = document.getElementById('Username').value;
fld2 = document.getElementById('Password').value;
fld3 = document.getElementById('First_Name').value;
fld4 = document.getElementById('Surname').value;
fld5 = document.getElementById('Year').value;
fld6 = document.getElementById('Phone_Number').value;
fld7 = document.getElementById('Email').value;
fld8 = document.getElementById('Verify_Password').value;
/////////////////////////////////////////////
/// detect length first
if(fld1.length > 5 && fld2.length > 5){

alert('aa');

pass1 = true;

}

////////////////////////////////////
if(isNaN(fld3) && isNaN(fld4)){

/// check value "Is Not A Number" which means its either alphas or a mix of both
alert('bb');

pass2 = true;

}

//////////////////////////////////////
if(! isNaN(fld5 && fld6)){

/// check value "Is Not A Number" or isNaN function but by using an ! you turn it around to the opposite result. which means it is a number
alert('cc');

pass3 = true;

}

////////////////////////////////////
/// use the indexOf method to detect an @
detect = fld7.indexOf('@');

if(detect > 0){
/// an @ has been found
alert('dd');

pass4 = true;

}

////////////////////////////////////
/// detect if fields are equal or match

if(fld2 == fld8){

alert('ee');

pass5 = true;


}

if(pass1 && pass2 && pass3 && pass4 && pass5){

document.forms[0].submit();

}

}

</SCRIPT>

davidj
02-26-2008, 10:46 PM
ok this tells you something

the fact that the other alerts are not firing therefore the field data is failing the validation

lets debug alert("aa");

is the data in the 2 fld vars > 5 chars ???

moe122
02-26-2008, 10:54 PM
yes i jus realised what it meant

and yes everything is working fine, but i get popups if its true and if its false im gna av to write ......else? but i dont really want popups i want a message on the actual webpage, how do i go about that?

davidj
02-26-2008, 11:10 PM
OK

add this to the page where you want your message to display

<div id="error"></div>


OK

in the function you can either do one of these ...


if(pass1 && pass2 && pass3 && pass4 && pass5){

document.forms[0].submit();

}else {

document.getElementById('error').innerHTML = "error message here";

}



ok

that example will display the error at the point where you displayed the <div id="error"> but will display the error on a fail which is fine but you dont know where it failed or which field failed.

take the example above and make it work for each validation condition with appropriate message

moe122
02-26-2008, 11:14 PM
ok i'll have a go at that, also some of my dropdwnz av an option.....other (please specify) then ive given another text field, how can i get it so that if some selects the other option and then enters something .....the info entered is sent to the database rather than other?

davidj
02-26-2008, 11:17 PM
is it me or am i building this for you

davidj
02-26-2008, 11:24 PM
you have to add a condition to check the other text field for a value. If the field contains data then ignore the dropdown.


if($_POST['other']){ //<< text field contains data

$dbvalue = textfield value

}elseif(! $_POST['other']){ //<< text field is empty

$dbvalue = dropdown value

}


use $dbvalue in the SQL

moe122
02-26-2008, 11:37 PM
i'll try that too in a bit...........jus tried the error messages and it works obviously beacause i got you helping me.....and i jus need a strt to familiar myself with the coding and then i be on my way, thats when u'll have some competion :P also i know this is probably a stupid question but you know the error message....how do i change the colour of the text?

davidj
02-26-2008, 11:39 PM
wrap the error string in a <span> and style it using CSS

moe122
02-27-2008, 12:05 AM
cnt seem to figure out the css?

davidj
02-27-2008, 12:15 AM
where you have ...


document.getElementById('error').innerHTML = "error message here";


need to be

document.getElementById('error').innerHTML = "<span class=\"style1\">error message here</span>";

where style1 is a CSS class

your going to have to research CSS and Class if your not familiar with CSS

moe122
02-27-2008, 12:34 AM
cool got it working thanx

if(isNaN(fld3)){} thats suppose 2 be text only right? just entered some text into it and still got the error?

moe122
02-27-2008, 12:52 AM
ok it does work but the problem is say if i get something wrong so i get an error but then correct it and then press submit i will still have that error showing unless i refresh the page? that could get confusing for the user who may still think the data entered is wrong......

davidj
02-27-2008, 07:42 AM
the function should rerun

it shouldnt retain the last input

moe122
02-27-2008, 12:02 PM
how do i get it to do that?

davidj
02-27-2008, 01:13 PM
the error shows but the validation works

inside the IF conditions if the validation passes just use the innerHTML method to set a blank message

moe122
02-27-2008, 02:09 PM
so like

if(fld1.length > 5){

document.getElementById('error9').innerHTML = "ok";

pass1 = true;

}else{

document.getElementById('error1').innerHTML = "<span class=\"style7\">Username must be atleast 6 characters</span>";

}

and where i want it to show

<div id="error1"><span class="style7"></span></div><div id="error9"></div></td>

this give the new error saying it works but also keeps the old error.....

davidj
02-27-2008, 02:16 PM
if thats what you want then fine

you could declare this at the top of your func


var err1 = document.getElementById('error1');

then when you want to use it you can do the following


err1.innerHTML = "message";

more elegant eh

moe122
02-28-2008, 12:57 AM
elegent eh...... jus lyk u?

got a couple of problems

1the numerical validation is true even when nothing is entered so it pops up with the error message 'OK' but it isnt really ok, its wrong

2 once all the validation is complete we head back to the php code which makes sure that certain fields are complete but that 1 jus refreshes the page and the page is blank again.....

btw what do you actually do??? U wrk for some secret agency? :P

moe122
02-28-2008, 01:02 AM
the 1st problem isnumerical and also the a==b validation

davidj
02-28-2008, 06:44 AM
1the numerical validation is true even when nothing is entered so it pops up with the error message 'OK' but it isnt really ok, its wrong

you can define and set the value initially at the start


var pass1 = false;
var pass2 = false;
var pass3 = false;

davidj
02-28-2008, 06:55 AM
once all the validation is complete we head back to the php code which makes sure that certain fields are complete but that 1 jus refreshes the page and the page is blank again.....

it doesnt refresh the page. it submits the form which submits the data if the JS validation is successful

if your PHP is falling over then thats another problem which you need to debug

davidj
02-28-2008, 07:29 AM
btw what do you actually do??? U wrk for some secret agency? :P

cant tell you coz ill have to disappear you

moe122
02-28-2008, 07:42 PM
hi stil get the error message still showing....and you know in the php we have if certain fields are field then submit the data....what if i jus turn it all to javascript? so there ent 2 pieces of code?

heres my javascript code for the 1st problem

function checkform(){
var pass1 = false;
var pass2 = false;
var pass3 = false;
var pass4 = false;
var pass5 = false;
var pass6 = false;
var pass7 = false;
var pass8 = false;
var err1 = document.getElementById('error1');
var err2 = document.getElementById('error2');
var err3 = document.getElementById('error3');
var err4 = document.getElementById('error4');
var err5 = document.getElementById('error5');
var err6 = document.getElementById('error6');
var err7 = document.getElementById('error7');
var err8 = document.getElementById('error8');
/// 1 numbers only
/// 2 text (just text) only
/// 3 contains @ for and email
/// 4 certain field value is the same as another

/// get field value
fld1 = document.getElementById('Username').value;
fld2 = document.getElementById('Password').value;
fld3 = document.getElementById('First_Name').value;
fld4 = document.getElementById('Surname').value;
fld5 = document.getElementById('Year').value;
fld6 = document.getElementById('Phone_Number').value;
fld7 = document.getElementById('Email').value;
fld8 = document.getElementById('Verify_Password').value;
/////////////////////////////////////////////
/// detect length first
if(fld1.length > 5){

err1.innerHTML = "<span class=\"style9\">OK</span>";

pass1 = true;

}else{

document.getElementById('error1').innerHTML = "<span class=\"style7\">Username must be atleast 6 characters</span>";

}

if(fld2.length > 5){

err2.innerHTML = "<span class=\"style9\">OK</span>";

pass2 = true;

}else{

document.getElementById('error2').innerHTML = "<span class=\"style7\">Password must be atleast 6 characters</span>";

}
////////////////////////////////////
if(isNaN(fld3)){

/// check value "Is Not A Number" which means its either alphas or a mix of both

err3.innerHTML = "<span class=\"style9\">OK</span>";

pass3 = true;

}else{

document.getElementById('error3').innerHTML = "<span class=\"style7\">Text only</span>";

}
if(isNaN(fld4)){

/// check value "Is Not A Number" which means its either alphas or a mix of both

err4.innerHTML = "<span class=\"style9\">OK</span>";

pass4 = true;

}else{

document.getElementById('error4').innerHTML = "<span class=\"style7\">Text only</span>";

}
//////////////////////////////////////
if(! isNaN(fld5)){

/// check value "Is Not A Number" or isNaN function but by using an ! you turn it around to the opposite result. which means it is a number

err5.innerHTML = "<span class=\"style9\">OK</span>";

pass5 = true;

}else{

document.getElementById('error5').innerHTML = "<span class=\"style7\">Value entered for 'Year' must be numerical</span>";

}

if(! isNaN(fld6)){

/// check value "Is Not A Number" or isNaN function but by using an ! you turn it around to the opposite result. which means it is a number

err6.innerHTML = "<span class=\"style9\">OK</span>";

pass6 = true;

}else{

document.getElementById('error6').innerHTML = "<span class=\"style7\">Numerical only</span>";

}
////////////////////////////////////
/// use the indexOf method to detect an @
detect = fld7.indexOf('@' && '.');

if(detect > 1){
/// an @ has been found

err7.innerHTML = "<span class=\"style9\">OK</span>";

pass7 = true;

}else{

document.getElementById('error7').innerHTML = "<span class=\"style7\">Please check again</span>";

}

////////////////////////////////////
/// detect if fields are equal or match

if(fld2 == fld8){

err8.innerHTML = "<span class=\"style9\">OK</span>";

pass8 = true;


}else{

document.getElementById('error8').innerHTML = "<span class=\"style7\">Passwords do not match</span>";

}

if(pass1 && pass2 && pass3 && pass4 && pass5 && pass6){

document.forms[0].submit();

}

}
// JavaScript Document

davidj
02-28-2008, 09:03 PM
your going to have to try and debug this yourself

moe122
02-28-2008, 09:15 PM
well i've jus added more validations on the rest of the required fields so that the php doesnt come into action so it should be ok.....apart from that say if the form submits can i get the page to go to another page?how do i do it?

davidj
02-28-2008, 09:17 PM
do you want the page to redirect after it has submitted

like a "thank you" page

moe122
02-28-2008, 10:20 PM
yes something like that although i wernt thinking about thankyou also how about sending the user an email with a few details such as username etc?

davidj
02-28-2008, 11:06 PM
use the header method after the form data has been sent to the db

header("location:thankyoupage.php");

in the thankyoupage.php you can use the email script (in the tutorial section)

moe122
02-29-2008, 05:14 PM
wher do i actually put that? and whats the tutorial called?

davidj
02-29-2008, 07:37 PM
you put it directly after your db insert query

you dont need a tutorial for this

moe122
02-29-2008, 07:39 PM
no i meant the email tutorial

davidj
02-29-2008, 07:41 PM
http://www.dreamweaverclub.com/dreamweaver-php-form.php

moe122
02-29-2008, 07:55 PM
what happens if the email ad is not real? and atm im jus validating my email adz by checkin 4 '@' and '.' but is there a real way of actually checkin if it exists? and what about for phone numbers? also why do most validations have that such and such field cant match eg username and password....is it jus for them or are there any real concerns?

davidj
02-29-2008, 08:22 PM
you cant truly validate an email address just the format of the address

what some sites do is ask the user for an email address then send a register email to that address for them to click and finish the process. Like a stage 1 and stage 2 process.

Same with phone numbers. You can validate an area code and a number length but cant check its a true number.

there are commercial programs that could access electoral databases but this is way above your requirements.

the reason that some fields have rules is that bots will try to register on your app. So developers have to come up with clever methods to stop them.

moe122
02-29-2008, 08:43 PM
cool....i kinda find myself in the middle of wanting as much info from people and validating it to make sure it is real but then you have people you cant be asked entering large amount of data and then having errors while it is validated.......also how do all these secure cetificate websites have work to show that they are secure?

edbr
03-01-2008, 05:45 AM
I came across an article where e mail addresses can be checked for existance I will look it out I also came across a site where it actually checked my e mail address, I had given a wrong yahoo address and it checked it.

davidj
03-01-2008, 09:52 AM
but the email address may be live but may not be monitored!

or could have been dropped recently

moe122
03-01-2008, 02:35 PM
Hey david how do i create a email application where members can contact each other and send email but it wont be to their emails although they'l get a notification 2 their email sayin they av mail.....so each member has an inbox etc. i was thinking of just using what weve got so far so that they enter info and then i jus show that up on the other persons inbox page.....also do i have the info entered in2 a database? if so would that take a lot of the webspace? and what about the security question i asked b4?

davidj
03-01-2008, 03:25 PM
you have just invented a ..... FORUM

moe122
03-01-2008, 03:38 PM
lolz was that a joke? or a reply to my question?

davidj
03-01-2008, 04:42 PM
if your wanting to build what you described then you have the skills and the tutorials to do this quite easily