logo-dw

Go Back   Dreamweaver Club Forums > Hand Coders Forum > Javascript and JS frameworks
Register FAQ Members List Search Today's Posts Mark Forums Read

Reply
 
Thread Tools Display Modes
Old 02-25-2008, 10:21 PM   #1
moe122
 
Join Date: Feb 2008
Posts: 138
Default Help with javascript and form validation

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
moe122 is offline   Reply With Quote
Old 02-26-2008, 03:44 AM   #2
mangofreak
mangofreak's Avatar
 
Join Date: Jan 2006
Location: Toronto-Canada
Posts: 444
Default

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
__________________
J.
DW | FW | HTML | CSS | ASP | some PHP | Windows | Ubuntu
mangofreak is offline   Reply With Quote
Old 02-26-2008, 05:53 AM   #3
davidj
davidj's Avatar
 
Join Date: Sep 2005
Location: The Toon (newcastle upon Tyne)
Posts: 8,256
Default

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
__________________
Would you like to learn PHP from me? Check out -> www.codezenith.co.uk
davidj is offline   Reply With Quote
Old 02-26-2008, 05:54 AM   #4
edbr
edbr's Avatar
 
Join Date: Aug 2005
Location: Bali
Posts: 11,164
Default

Code:
<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
Code:
<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
__________________
If you're happy and you know it shake your meds!
different style links examples

Flight / Hotel search
Free script download
Bali Villas
edbr is offline   Reply With Quote
Old 02-26-2008, 06:09 AM   #5
davidj
davidj's Avatar
 
Join Date: Sep 2005
Location: The Toon (newcastle upon Tyne)
Posts: 8,256
Default

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
__________________
Would you like to learn PHP from me? Check out -> www.codezenith.co.uk
davidj is offline   Reply With Quote
Old 02-26-2008, 05:25 PM   #6
moe122
 
Join Date: Feb 2008
Posts: 138
Default

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......
moe122 is offline   Reply With Quote
Old 02-26-2008, 05:40 PM   #7
davidj
davidj's Avatar
 
Join Date: Sep 2005
Location: The Toon (newcastle upon Tyne)
Posts: 8,256
Default

OK

you need a javascript function
Code:
 
function validate(){
 
/// do stuff here
 
}
you need to grab the value of each field. You can do that using getElementById method

Code:
 
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

Code:
 
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

Code:
 
onclick="validate()"
do this and test each field value is being alerted then we will move on to the validation
__________________
Would you like to learn PHP from me? Check out -> www.codezenith.co.uk
davidj is offline   Reply With Quote
Old 02-26-2008, 05:47 PM   #8
moe122
 
Join Date: Feb 2008
Posts: 138
Default

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)
moe122 is offline   Reply With Quote
Old 02-26-2008, 05:50 PM   #9
davidj
davidj's Avatar
 
Join Date: Sep 2005
Location: The Toon (newcastle upon Tyne)
Posts: 8,256
Default

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
__________________
Would you like to learn PHP from me? Check out -> www.codezenith.co.uk
davidj is offline   Reply With Quote
Old 02-26-2008, 05:54 PM   #10
moe122
 
Join Date: Feb 2008
Posts: 138
Default

cool

so far my codes as follows

Code:
<?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>
moe122 is offline   Reply With Quote
Reply


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 02:28 AM.


Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2017, vBulletin Solutions, Inc.
Copyright 2006 DreamweaverClub.com