user7592769
user7592769

Reputation:

when i click on submit button only captcha is validating but other such as first name ,last name,email, is validated but and is not working

<script>
        function q_form_val()
        {
            var patt = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
            var quantity = document.getElementById("quantity").value;
            var size_specifications = document.getElementById("size_specifications").value;
            var fname = document.getElementById("fname").value;
            var lname = document.getElementById("lname").value;
            var telno = document.getElementById("telno").value;
            var email = document.getElementById("email").value;
            var address = document.getElementById("address").value;
            var city = document.getElementById("city").value;
            var state = document.getElementById("state").value;
            var country = document.getElementById("country").value;
            var zipcode = document.getElementById("zipcode").value;
            var captcha_entered=document.getElementById("captcha_entered").value;

            if(quantity == "")
            {
                alert("Please fill in quantity.");
                return false;
            }
            if(isNaN(quantity))
            {
                alert("Please fill in numeric value for quantity.");
                return false;
            }
            //if(quantity < 2500){

            //}
            if(size_specifications == "Select Size")
            {
                alert("Please select size specifications.");
                return false;
            }
            if(fname == "")
            {
                alert("Please fill in first name.");
                return false;
            }
            if(!(isNaN(fname)))
            {
                alert("Please fill correct first name.");
                return false;
            }
            if(lname == "")
            {
                alert("Please fill in last name.");
                return false;
            }
            if(!(isNaN(lname)))
            {
                alert("Please fill correct last name.");
                return false;
            }
            if(email == "")
            {
                alert("Please fill in email address.");
                return false;
            }
            if(!(patt.test(email)))
            {
                alert("Please enter valid email address.");
                return false;
            }
            if(telno == "")
            {
                alert("Please fill in telephone number.");
                return false;
            }
            if(isNaN(telno))
            {
                alert("Please fill numeric value for telephone number.");
                return false;
            }
            if(address == "")
            {
                alert("Please fill in address.");
                return false;
            }
            if(city == "")
            {
                alert("Please fill in city.");
                return false;
            }
            if(!(isNaN(city)))
            {
                alert("Please do not fill numeric value for city.");
                return false;
            }
            if(zipcode == "")
            {
                alert("Please fill in zipcode.");
                return false;
            }
            if(state == "")
            {
                alert("Please fill in state.");
                return false;
            }
            if(!(isNaN(state)))
            {
                alert("Please do not fill numeric value for state.");
                return false;
            }
            if(country == "")
            {
                alert("Please fill in country.");
                return false;
            }
            if(!(isNaN(country)))
            {
                alert("Please do not fill numeric value for country.");
                return false;
            }

        </script>
</head>
<body>
    <!-- Header-->
    <?PHP 
    include("include files/header.php");
    ?><!-- End of Header -->    
    <!-- Navigation Bar-->
    <?PHP
    include("include files/navigation.php");
    ?><!-- End of Navigation -->        
    <!-- banner -->
    <!-- breadcrumb -->
    <div id='location' itemscope itemtype="http://schema.org/BreadcrumbList">
    <div id="BannerAndNavigatorHtmlBlock_StoreNavigator_pnNavigator" class="btn-group btn-breadcrumb">
    <span itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem" class="btn btn-default"><a itemprop="item" href="/"><span class="glyphicon glyphicon-home" itemprop="name"></span></a><span itemprop="position" content="1"></span></span><span class="btn btn-success" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><span itemprop="name">Fill Quote Form</span><span itemprop="position" content="2"></span></span></div></div>
<div class="projects">  
    <div class="container">
        <form name="q_form" id="form1" class="form-horizontalrole" action="thank-you.php" onsubmit="return q_form_val()" method="POST" enctype="multipart/form-data">
            <h1>Fill Quote Form :</h1>
                <div>&nbsp;</div>
                    <div class="row">
                        <div class="form-group">
                            <label class="control-label col-sm-2"><strong>Plastic Coated Paper :</strong></label>
                            <div class="col-sm-3">
                                <select onchange="changeopt1()" onclick="centeredcategory()" class='form-control' name="plastic_coated_paper" id="plastic_coated_paper">
                                    <option>Select Paper</option>
                                    <option value="White Centered">280 GSM White Centered stock</option>
                                    <option value="White Centered">310 GSM White Centered stock</option>
                                    <option value="White Centered">350 GSM White Centered stock For Flash Cards</option>
                                    <option value="White Centered">400 GSM White Centered stock For Flash Cards</option>
                                    <option value="Black Centered">300 GSM Black Centered stock</option>
                                    <option value="White Centered">315 GSM White Centered stock</option>
                                    <option value="Black Centered">Black Centered 330</option>
                                    <option value="Black Centered">Black Centered 320</option>
                                    <option value="Black Centered">Black Centered 315</option>
                                    <option value="Black Centered">Black Centered 305</option>
                                    <option value="Black Centered">Black Centered 300</option>
                                    <option value="Black Centered">Black Centered 280</option>
                                    <option value="White Centered">White Centered 330</option>
                                    <option value="White Centered">White Centered 320</option>
                                    <option value="White Centered">White Centered 315</option>
                                    <option value="White Centered">White Centered 305</option>
                                    <option value="White Centered">White Centered 300</option>
                                    <option value="White Centered">White Centered 280</option>
                                </select>
                            </div>
                            <div class="col-sm-1"><label class="que-mark" id="quemark1">?</label>
                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span><strong>OR</strong></span>
                            </div>
                            <label class="control-label col-sm-2"><strong>100% Pure Plastic :</strong></label>
                            <div class="col-sm-3">
                                <select onchange="changeopt2()" class='form-control' name="pure_plastic" id="pure_plastic">
                                    <option>Select Plastic</option>
                                    <option>250 -270 Microns Plastic stock</option>
                                    <option>290 -310 Microns Plastic stock</option>
                                    <option>250 Microns</option>
                                    <option>260 Microns</option>
                                    <option>270 Microns</option>
                                    <option>280 Microns</option>
                                    <option>290 Microns</option>
                                    <option>300 Microns</option>
                                    <option>310 Microns</option>
                                </select>
                            </div>
                            <div class="col-sm-1"><label class="que-mark" id="quemark2">?</label></div>
                        </div>
                    </div>
                    <div>&nbsp;</div>


                    <hr>
                    <h2>Personal Details:</h2>
                    <div>&nbsp;</div>
                    <div class="row" >
                        <div class="form-group">
                            <label for="fname" class="control-label col-sm-3"><font color="#FF0000">*</font><strong>First Name</strong></label>
                            <div class="col-sm-3">
                                <input type="text" class="form-control" name="fname" id="fname" />
                            </div>
                            <label for="lname" class="control-label col-sm-3"><font color="#FF0000">*</font><strong>Last Name</strong></label>
                            <div class="col-sm-3">
                                <input type="text" class="form-control" name="lname" id="lname" />
                            </div>
                        </div>
                    </div>
                    <div>&nbsp;</div>
                    <div class="row" >
                        <div class="form-group">
                            <label for="email" class="control-label col-sm-3"><font color="#FF0000" maxlength="100">*</font><strong>Email</strong></label>
                            <div class="col-sm-3">
                                <input type="text" class="form-control" name="email" id="email" />
                            </div>
                            <label for="telno" class="control-label col-sm-3"><font color="#FF0000">*</font><strong>Telephone number</strong></label>
                            <div class="col-sm-3">
                                <input type="text" class="form-control" name="telno" id="telno" maxlength="10" />
                            </div>
                        </div>
                    </div>
                    <div>&nbsp;</div>
                    <div class="row" >
                        <div class="form-group">
                            <label for="address" class="control-label col-sm-3"><font color="#FF0000">*</font><strong>Address</strong></label>
                            <div class="col-sm-3">
                                <input type="text" class="form-control" name="address" id="address"/>
                            </div>
                            <label for="country" class="control-label col-sm-3"><font color="#FF0000">*</font><strong>Country</strong></label>
                            <div class="col-sm-3">
                                <input type="text" class="form-control" name="country" id="country"/>
                            </div>  
                        </div>
                    </div>
                    <div>&nbsp;</div>
                    <div class="row" >  
                        <div class="form-group">                        
                            <label for="city" class="control-label col-sm-3"><font color="#FF0000">*</font><strong>City</strong></label>
                            <div class="col-sm-3">
                                <input type="text" class="form-control" name="city" id="city" />
                            </div>
                            <label for="state" class="control-label col-sm-3"><font color="#FF0000">*</font><strong>State</strong></label>
                            <div class="col-sm-3">
                                <input type="text" class="form-control" name="state" id="state"/>
                            </div>
                        </div>
                    </div>
                    <div>&nbsp;</div>
                    <div class="row">   
                        <div class="form-group" >
                            <label for="zipcode" class="control-label col-sm-3"><font color="#FF0000">*</font><strong>Zip Code</strong></label>
                            <div class="col-sm-3">
                                <input type="text" class="form-control" name="zipcode" id="zipcode"/>
                            </div>
                            <label for="fax" class="control-label col-sm-3"><strong>Fax</strong></label>
                            <div class="col-sm-3">
                                <input type="text" class="form-control" name="fax" id="fax"/>
                            </div>
                        </div>
                    </div>
                    <div>&nbsp;</div>
                    <div class="row">
                        <div class="form-group">
                        <label class="control-label col-sm-3"><font color="#FF0000">*</font><strong>Captcha</strong></label>
                        <div class="col-sm-3">

                        <script>

                                    function q_form_val(){
                                 var alpha = new Array('A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z','a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z');
                                 var i;
                                 for (i=0;i<6;i++){
                                   var a = alpha[Math.floor(Math.random() * alpha.length)];
                                   var b = alpha[Math.floor(Math.random() * alpha.length)];
                                   var c = alpha[Math.floor(Math.random() * alpha.length)];
                                   var d = alpha[Math.floor(Math.random() * alpha.length)];
                                   var e = alpha[Math.floor(Math.random() * alpha.length)];
                                   var f = alpha[Math.floor(Math.random() * alpha.length)];
                                   var g = alpha[Math.floor(Math.random() * alpha.length)];
                                  }
                                var code = a + ' ' + b + ' ' + ' ' + c + ' ' + d + ' ' + e + ' '+ f + ' ' + g;
                                document.getElementById("mainCaptcha").value = code
                              }
                              function ValidCaptcha(){
                                  var string1 = removeSpaces(document.getElementById('mainCaptcha').value);
                                  var string2 = removeSpaces(document.getElementById('txtInput').value);
                                  if (string1 == string2){
                                    return true;
                                  }
                                  else{        
                                    return false;
                                  }
                              }
                              function removeSpaces(string){
                                return string.split(' ').join('');
                              }
                         </script>    
                    </head>
                 <body onload="q_form_val();">
                    <table>
                      <tr>
                       <td>
                             Text Captcha<br />
                       </td>
                      </tr>
                      <tr>
                       <td>
                         <input type="text" id="mainCaptcha"/>
                          <input type="button" id="refresh" value="Refresh" onclick="q_form_val();" />
                       </td>
                      </tr>
                      <tr>
                       <td>
                        <input type="text" id="txtInput"/>    
                      </td>
                     </tr>
                     <tr>
                      <td>
                        <input id="Button1" class="btn1"  type="button" value="Submit"  onclick="alert(ValidCaptcha());"/>
                      </td>
                    </tr>
                  </table>
                </body>

                                    </div>
                                    </div>
                                </div>
                                <div>&nbsp;</div>
                                <div class="row">
                                    <div class="col-sm-12">
                                        <center>

                                        <noscript><p style="color: red;"><b><i>Please enable JavaScript to continue</i></b><p></noscript>
                                        </center>
                                    </div>
                                </div>
                                <div class="row">
                                    <hr>
                                    <div class="col-sm-12">
                                        <center>*Please feel free to contact us for any queries or problems in using this section.</center>
                                    </div>
                                </div>
                    </form>
                </div>
            </div>

when i click on submit button only captcha is validating but other such as first name ,last name,email, is validated but and is not working i m not able to validate not forms leaving captcha my captcha is validating first and then quantity and size speci,fname ,last name ,,,,andd so on

Upvotes: 1

Views: 117

Answers (2)

Siphalor
Siphalor

Reputation: 723

Maybe you want your submit button to be of type submit instead of type button and onsubmit instead of onclick.

Like this:

<input id="Button1" class="btn1"  type="submit" value="Submit" />

<form onsubmit="return form_q_val()">

Inside of form_q_val you now can call all your captcha functions. Then return true in form_q_val if the form should be accepted and false if rejected.

Note:

Please recheck the entered values with PHP too, because JavaScript can always be manipulated by a user.

Edit:

The Solution was quite a bit different, but that should be a way too.

Upvotes: 0

Igino Boffa
Igino Boffa

Reputation: 451

return true at the end of q_form_val function is missing.

Also, I don't understand why validation should be executed "onload", I'd execute it on submit

Upvotes: 1

Related Questions