Reputation:
<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> </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>
<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> </div>
<hr>
<h2>Personal Details:</h2>
<div> </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> </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> </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> </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> </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> </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> </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
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
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