javaScript field validations using in php file
<p>i'm working on php form which needs the field validations using JavaScript
but i don't know how to use that in php as i'm a new guy to this one. some how i tried to do it by the following code</p>

<pre><code>&lt;?php

 session_start();
 // include_once('header.php');

?&gt;

&lt;div id="contentarea"&gt;

&lt;div style="background-color:#3fa0c1;color:#FFF"&gt;
 &lt;h2 style="color:#FFF"&gt; Checkout &lt;/h2&gt;
&lt;/div&gt;
&lt;br/&gt;  
&lt;h4&gt; Welcome to Checkout. &lt;br/&gt;
Please fill in the fields below to complete your purchase! 
&lt;/h4&gt;&lt;br/&gt;


&lt;form action=" " method="POST" name="Form" onsubmit="return ValidateForm();"  style="color:#000000; font-size:18px;" 

&lt;?php switch ($_GET["checkoutType"]) {
        case "Guest":   echo 'action="guestCheckout.php"'; break;
        case "Register": echo 'action="registerCheckout.php"'; break;
    }
?&gt;

&gt;   
    &lt;h3&gt; BILLING ADDRESS &lt;/h3&gt;&lt;br/&gt;

    First Name*
    &lt;input style="height:20px; margin-bottom:10px;" name="firstname" size="40" id="firstname"/&gt; &lt;br/&gt;

    Last Name* 
    &lt;input style="height:20px; margin-bottom:10px;"  name="lastname" size="40"/&gt;&lt;br/&gt;

    Email Address* 
    &lt;input style="height:20px; margin-bottom:10px;"  name="email" size="40"/&gt;&lt;br/&gt;

    Confirm Email Address* 
    &lt;input style="height:20px; margin-bottom:10px;"  name="email2" size="40"/&gt;&lt;br/&gt;

    Telephone* 
    &lt;input style="height:20px; margin-bottom:10px;"  name="telephone" size="40"/&gt;&lt;br/&gt;

    Address* &lt;br/&gt;
    &lt;input  style="height:20px; margin-bottom:10px;"  name="addr1" id="addr1" size="40"/&gt;&lt;br/&gt;
    &lt;input  style="height:20px; margin-bottom:10px;"  name="addr2" id="addr2" size="40"/&gt;&lt;br/&gt;

    Country*  &lt;br/&gt;
    &lt;!-- input  style="height:20px; margin-bottom:10px;"  name="country" size="40"/&gt;&lt;br/--&gt;
    &lt;select name="country" id="country"&gt;
         &lt;option value="select_country"&gt; Select Country &lt;/option&gt;
         &lt;option value="US"&gt; United States &lt;/option&gt;
    &lt;/select&gt;
    &lt;br/&gt;
    &lt;br/&gt;

    City*  &lt;br/&gt;
    &lt;input  style="height:20px; margin-bottom:10px;"  name="city" size="40"/&gt;&lt;br/&gt;

    Zip Code* 
    &lt;input  style="height:20px; margin-bottom:10px;" name="postcode" size="40"/&gt;&lt;br/&gt;

    State* &lt;br/&gt;
    &lt;!-- input  style="height:20px; margin-bottom:10px;"  name="state" size="40"/&gt;&lt;br/--&gt;
    &lt;select name="region" id="state"&gt;
         &lt;option value="select_state"&gt; Select Region&lt;/option&gt;
         &lt;option value="FL"&gt; Florida &lt;/option&gt;
         &lt;option value="GA"&gt; Georgia &lt;/option&gt;
    &lt;/select&gt;
    &lt;br/&gt;&lt;br/&gt;

    Company
    &lt;input  style="height:20px; margin-bottom:10px;" name="company" size="40"/&gt;&lt;br/&gt;

    &lt;input name="ship_to_same_addr" type="checkbox"  checked="checked" /&gt; Ship to the same address. &lt;br/&gt;&lt;br/&gt;

&lt;h3&gt; SHIPPING METHOD &lt;/h3&gt;&lt;br/&gt;

    &lt;b&gt; Post Office: Priority Mail (USA) - First Class (International) &lt;/b&gt; &lt;br/&gt;
    &lt;input type="radio" name="shipping_method" id="shipping_method" checked="checked" /&gt;  Fixed &lt;b&gt; $6.95&lt;/b&gt;. &lt;br/&gt;&lt;br/&gt;

&lt;h3&gt; PAYMENT METHOD &lt;/h3&gt;&lt;br/&gt;

    &lt;input type="radio" name="pay_method" id="pay_method" checked="checked" /&gt;  Credit Card (Authorize.net) &lt;br/&gt;&lt;br/&gt;

    Credit Card Type*
    &lt;!--input  style="height:20px; margin-bottom:10px;"  name="cc_type" size="40"/&gt;&lt;br/ --&gt;
    &lt;select name="cc_type" id="cc_type"&gt;
     &lt;option value="AE"&gt; American Express &lt;/option&gt;
     &lt;option value="DI"&gt; Discover &lt;/option&gt;
     &lt;option value="MC"&gt; Master Card &lt;/option&gt;
     &lt;option value="VI"&gt; Visa &lt;/option&gt;
    &lt;/select&gt;
    &lt;br/&gt;&lt;br/&gt;

    Credit Card Number*
    &lt;input  style="height:20px; margin-bottom:10px;"  name="cc_number" id="cc_number" size="40"/&gt;&lt;br/&gt;

    Credit Card Security Code*
    &lt;input  style="height:20px; margin-bottom:10px;"  name="cc_cid" id="cc_cid" size="40"/&gt;&lt;br/&gt;

    Expiration Date*&lt;br/&gt;
    &lt;!-- input  style="height:20px; margin-bottom:10px;"  name="cc_exp_month" size="20"/--&gt;
     &lt;select name="cc_exp_month" id="cc_exp_month"&gt;
         &lt;option value="select_month"&gt; Select Month &lt;/option&gt;
         &lt;option value="01"&gt; 01 - January &lt;/option&gt;
         &lt;option value="02"&gt; 02 - February &lt;/option&gt;
         &lt;option value="03"&gt; 03 - March &lt;/option&gt;
         &lt;option value="04"&gt; 04 - April &lt;/option&gt;
         &lt;option value="05"&gt; 05 - May &lt;/option&gt;
         &lt;option value="06"&gt; 06 - June &lt;/option&gt;
         &lt;option value="07"&gt; 07 - July  &lt;/option&gt;
         &lt;option value="08"&gt; 08 - August &lt;/option&gt;
         &lt;option value="09"&gt; 09 - September &lt;/option&gt;
         &lt;option value="10"&gt; 10 - October &lt;/option&gt;
         &lt;option value="11"&gt; 11 - November &lt;/option&gt;
         &lt;option value="12"&gt; 12 - December &lt;/option&gt;
    &lt;/select&gt;
    &lt;br/&gt;
    &lt;!-- input  style="height:20px; margin-bottom:10px;"  name="cc_exp_year" size="20"/--&gt;&lt;br/&gt;
    &lt;select name="cc_exp_year" id="cc_exp_year"&gt;
         &lt;option value="select_year"&gt; Select Year &lt;/option&gt;
         &lt;option value="2012"&gt; 2012 &lt;/option&gt;
         &lt;option value="2013"&gt; 2013 &lt;/option&gt;
         &lt;option value="2014"&gt; 2014 &lt;/option&gt;
         &lt;option value="2015"&gt; 2015 &lt;/option&gt;
         &lt;option value="2016"&gt; 2016 &lt;/option&gt;
         &lt;option value="2017"&gt; 2017 &lt;/option&gt;
         &lt;option value="2018"&gt; 2018 &lt;/option&gt;
         &lt;option value="2019"&gt; 2019 &lt;/option&gt;
         &lt;option value="2020"&gt; 2020 &lt;/option&gt;
    &lt;/select&gt;
    &lt;br/&gt;&lt;br/&gt;

    Coupon Code
     &lt;input  style="height:20px; margin-bottom:10px;"  name="coupon_code" size="40"/&gt;&lt;br/&gt;

    Comments
    &lt;textarea rows="6" cols="40" name="comments"&gt;&lt;/textarea&gt;&lt;br/&gt;&lt;br/&gt;

    &lt;input type="submit" value="Place Order Now" /&gt;

&lt;/form&gt;


&lt;script&gt;
function ValidateForm()
{
    var firstname = document.Form.firstname;
    var lastname = document.Form.lastname;

    var email = document.Form.email;
    var email2 = document.Form.email2;   
    var telephone = document.Form.telephone;

    var address = document.Form.addrl;
    var address = document.Form.addr2;
     var country = document.Form.country;
     var city = document.Form.city;

     var postcode = document.Form.postcode;
     var state = document.Form.state;
     var company = document.Form.company;
     var creditcardtype = document.Form.cc_type;
     var creditcardnumber = document.Form.cc_number;
     var creditcardsecuritycode = document.Form.cc_cid;
     var expirationdate = document.Form.cc_exp_month;
     var expirationdate = document.Form.cc_exp_month;


    if (firstname.value == "")
    {
        window.alert("Please enter your last name.");
        firstname.focus();
        return false;
    }  


    if (lastname.value == "")
    {
        window.alert("Please enter your last name.");
        lastname.focus();
        return false;
    }  

    if (email.value == "")
    {
        window.alert("Please enter e-mail address.");
        email.focus();
        return false;
    }
    if (email.value.indexOf("@", 0) &lt; 0)
    {
        window.alert("Please enter a valid e-mail address.");
        email.focus();
        return false;
    }
    if (email2.value == "")
    {
        window.alert("Please enter confirm e-mail address.");
        email2.focus();
        return false;
    }
    if (email2.value.indexOf("@", 0) &lt; 0)
    {
        window.alert("Please enter a valid e-mail address.");
        email2.focus();
        return false;
    }
    if(email.value != email2.value)
    {
      window.alert("Please enter email &amp; confirm email both same");
      return false;
    }

    if  (telephone.value == "")
    {
        window.alert("Please enter your telephone number.");
        telephone.focus();
        return false;
    }

    if (addr1.value == "")
    {
        window.alert("Please enter your address1.");
        add1.focus();
        return false;
    }
     if (addr2.value == "")
    {
        window.alert("Please enter your address2.");
        add2.focus();
        return false;
    }

   if (country.selectedIndex &lt; 1)
    {
        alert("Please select country.");
        country.focus();
        return false;
    }
     if (city.value == "")
    {
        window.alert("Please enter city.");
        city.focus();
        return false;
    }
     if (postcode.value == "")
    {
        window.alert("Please enter zip code.");
        postcode.focus();
        return false;
    }
     if (state.selectedIndex &lt; 1)
    {
        window.alert("Please enter state.");
        state.focus();
        return false;
    }

    if (cc_type.selectedIndex &lt; 1)
    {
        window.alert("Please enter credit card type.");
        cc_type.focus();
        return false;
    }
    if (cc_number.value == "")
    {
        window.alert("Please enter credit card number.");
        cc_number.focus();
        return false;
    }
    if (cc_cid.value == "")
    {
        window.alert("Please enter credit card security code.");
        cc_cid.focus();
        return false;
    }
    if (cc_exp_month.selecedIndex &lt; 1)
    {
        window.alert("Please enter expiry date.");
        cc_exp_montht.focus();
        return false;
    }
    if (cc_exp_year.selectedIndex &lt; 1)
    {
        window.alert("Please enter expiry date.");
        cc_exp_year.focus();
        return false;
    }


    return true;
}


&lt;/script&gt;

&lt;/div&gt;
&lt;?php 

//include_once('footer.php')

?&gt;
</code></pre>

<p>it seems working fine but what i need to do is to show the error message after each field validation is done instead of showing the alert boxes...how can i do that
any help will be appreciated.....thanks in advance.</p>
