form in php validations in javascript

Question

i creted a form in php,and i wrote that validations in javascript,but when i execute the form,in that time i entered some values in the form, it shows the validations,after that it does nt displayed any thing.can anyone tell the solution?

the form is

<?php

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

?>

<div id="contentarea">

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


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

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

>   
    <h3> BILLING ADDRESS </h3><br/>

    First Name*
    <input style="height:20px; margin-bottom:10px;" name="firstname" size="40"/><span id="error1" style="color:red;"></span> <br/>

    Last Name* 
    <input style="height:20px; margin-bottom:10px;"  name="lastname" size="40"/><span id="error2" style="color:red;"></span><br/>

    Email Address* 
    <input style="height:20px; margin-bottom:10px;"  name="email" size="40"/><span id="error3" style="color:red;"></span><br/>

    Confirm Email Address* 
    <input style="height:20px; margin-bottom:10px;"  name="email2" size="40"/><span id="error4" style="color:red;"></span><br/>

    Telephone* 
    <input style="height:20px; margin-bottom:10px;"  name="telephone" size="40"/><span id="error5" style="color:red;"></span><br/>

    Address* <br/>
    <input  style="height:20px; margin-bottom:10px;"  name="addr1" id="addr1" size="40"/><span id="error6" style="color:red;"></span><br/>
    <input  style="height:20px; margin-bottom:10px;"  name="addr2" id="addr2" size="40"/><span id="error7" style="color:red;"></span><br/>

    Country*  <br/>
    <!-- input  style="height:20px; margin-bottom:10px;"  name="country" size="40"/><br/-->
    <select name="country" id="country"><span id="error8" style="color:red;"></span>
         <option value="select_country"> Select Country </option>
         <option value="US"> United States </option>
    </select>
    <br/>
    <br/>

    City*  <br/>
    <input  style="height:20px; margin-bottom:10px;"  name="city" size="40"/><span id="error9" style="color:red;"></span><br/>

    Zip Code* 
    <input  style="height:20px; margin-bottom:10px;" name="postcode" size="40"/><span id="error10" style="color:red;"></span><br/>

    State* <br/>
    <!-- input  style="height:20px; margin-bottom:10px;"  name="state" size="40"/><br/-->
    <select name="region" id="state"><span id="error11" style="color:red;"></span>
         <option value="select_state"> Select Region</option>
         <option value="FL"> Florida </option>
         <option value="GA"> Georgia </option>
    </select>
    <br/><br/>

    Company
    <input  style="height:20px; margin-bottom:10px;" name="company" size="40"/></span><br/>

    <input name="ship_to_same_addr" type="checkbox"  checked="checked" /> Ship to the same address. <br/><br/>

<h3> SHIPPING METHOD </h3><br/>

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

<h3> PAYMENT METHOD </h3><br/>

    <input type="radio" name="pay_method" id="pay_method" checked="checked" />  Credit Card (Authorize.net) <br/><br/>

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

    Credit Card Number*
    <input  style="height:20px; margin-bottom:10px;"  name="cc_number" id="cc_number" size="40"/><span id="error13" style="color:red;"></span><br/>

    Credit Card Security Code*
    <input  style="height:20px; margin-bottom:10px;"  name="cc_cid" id="cc_cid" size="40"/><span id="error14" style="color:red;"></span><br/>

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

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

    Comments
    <textarea rows="6" cols="40" name="comments"></textarea><br/><br/>

    <input type="submit" value="Place Order Now" />

</form>


<script>
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 addrone = document.Form.addrl;
    var addrtwo = 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;
     var err=0;
    if (firstname.value == "")
    {
         document.getElementById("error1").innerHTML = "enter first Name";
        err=1;
    }  
    else{
    document.getElementById("error1").innerHTML = "";
    }

    if (lastname.value == "")
    {
       document.getElementById("error2").innerHTML = "enter last Name";
        err=1;
    } 
      else{
    document.getElementById("error2").innerHTML = "";
    } 

    if (email.value == "")
    {
      document.getElementById("error3").innerHTML = "enter email address";
        err=1;
    }else{
    document.getElementById("error3").innerHTML = "";
    } 

    if (email.value.indexOf("@", 0) < 0)
    {
    document.getElementById("error3").innerHTML = "enter valid email";
        err=1;
     }else{
    document.getElementById("error3").innerHTML = "";
    }  
    if (email2.value == "")
    {
    document.getElementById("error4").innerHTML = "enter confirm email address";
        err=1;
     }else{
    document.getElementById("error4").innerHTML = "";
    } 

    if(email.value != email2.value)
    {
      document.getElementById("error4").innerHTML = "Please enter email & confirm email both same";
        err=1;
      }else{
    document.getElementById("error4").innerHTML = "";
    } 

    if  (telephone.value == "")
    {
        document.getElementById("error5").innerHTML = "Please enter your telephone number.";
        err=1;
     }else{
    document.getElementById("error5").innerHTML = "";
    } 


    if (addrone.value == "")
    {
        document.getElementById("error6").innerHTML = "Please enter your address1.";
        err=1;
    }else{
    document.getElementById("error6").innerHTML = "";
    } 

     if (addrtwo.value == "")
    {
        document.getElementById("error7").innerHTML = "Please enter your address2.";
        err=1;
    }

   if (country.selectedIndex < 1)
    {
        document.getElementById("error8").innerHTML = "Please enter country.";
        err=1;
        }else{
    document.getElementById("error8").innerHTML = "";
    } 
     if (city.value == "")
    {
      document.getElementById("error9").innerHTML = "Please enter city.";
        err=1;        
    }else{
    document.getElementById("error9").innerHTML = "";
    } 
     if (postcode.value == "")
    {
        document.getElementById("error10").innerHTML = "Please enter zipcode.";
        err=1;
    }else{
    document.getElementById("error10").innerHTML = "";
    } 
     if (state.selectedIndex < 1)
    {
        document.getElementById("error11").innerHTML = "Please enter state.";
        err=1;
    }else{
    document.getElementById("error11").innerHTML = "";
    } 

    if (cc_type.selectedIndex < 1)
    {
        document.getElementById("error12").innerHTML = "Please enter credit card type.";
        err=1;   
       }else{
    document.getElementById("error12").innerHTML = "";
    } 

    if (cc_number.value == "")
    {
        document.getElementById("error13").innerHTML = "Please enter credit card number.";
        err=1;
        }else{
    document.getElementById("error13").innerHTML = "";
    } 
    if (cc_cid.value == "")
    {
        document.getElementById("error14").innerHTML = "Please enter credit card security code.";
        err=1;
    }else{
    document.getElementById("error14").innerHTML = "";
    } 

    if (cc_exp_month.selecedIndex < 1)
    {
        document.getElementById("error15").innerHTML = "Please enter expiry date.";
        err=1;
        }else{
    document.getElementById("error15").innerHTML = "";
    } 
    if (cc_exp_year.selectedIndex < 1)
    {
        document.getElementById("error16").innerHTML = "Please enter expiry date.";
        err=1;
    }else{
    document.getElementById("error16").innerHTML = "";
    } 


    return true;
}


</script>



</div>
<?php 

//include_once('footer.php')

?>

FYI, JavaScript validation can be bypassed by simply turning JS off. You should consider server side validation (possibly in addition) to ensure proper data gets stored. — jeremyharris
– jeremyharris, Commented May 1, 2012 at 16:02

Satya · Accepted Answer · 2012-05-01 16:02:45Z

1

After this

document.getElementById("error1").innerHTML = "enter first Name";
err=1;

add

return false ;

answered May 1, 2012 at 16:02

Satya

8,9016 gold badges41 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

leela Over a year ago

when i enter the address field ,all the above values are disappering & the form is getting refreshed

uttam · Accepted Answer · 2012-05-02 08:39:30Z

1

You can do something like this...

<script>
function ValidateForm() {
    var firstname = document.Form.firstname;

    if (firstname.value == "")
    {
        document.getElementById("error1").innerHTML = "enter first Name";
        return false;
    } 

    return true;   
}
</script>

answered May 2, 2012 at 8:39

uttam

5892 gold badges7 silver badges33 bronze badges

Comments

Tuhin Subhra Dey · Accepted Answer · 2012-05-01 16:05:27Z

0

At the end of your function just add

if(err==1)
   return false;

Thanks.

answered May 1, 2012 at 16:05

Tuhin Subhra Dey

9806 silver badges20 bronze badges

3 Comments

Tuhin Subhra Dey Over a year ago

Also for every else clause set err=0;

Tuhin Subhra Dey Over a year ago

No way you just have to check one by one condition and alert err . Also I think you will have more than one action attribute in your form. If you see its view source.

leela Over a year ago

i alredy placed my source code above,in that one i give only one action attribute check it once.

Collectives™ on Stack Overflow

form in php validations in javascript

3 Answers 3

1 Comment

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related