so what I am trying to do is set up a basic web form which will validate the fields (name, address, city etc...) and also check to see if the reCAPTCHA is valid. Then when both these fields and reCAPTCHA are valid I want to submit the form to the database and if it is not valid tell the user to try again.
The problem I seem conflicted on is trying to figure out how to correctly implement this to the web form where it first checks that all the feilds are eneterd and then checks if the reCAPTCHA is valid, the field validation was created for me. The reCAPTCHA validation I had to code in PHP. Please look at the following code.
this is the form that will be displayed on my website
<!DOCTYPE html>
<head>
<title>Request A Demo:</title>
<!-- google tells you to add this script tag in the HEAD section -->
<script src='https://www.google.com/recaptcha/api.js'></script>
</head>
<!-- INSERT THE FOLLOWING IN BETWEEN THE ‘BODY’ TAGS IN YOUR HTML PAGE -->
<META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=UTF-8">
<script src="https://www.methodintegration.com/MethodWebForms/Javascript/formValidation.js" type="text/javascript"></script>
<script>
function validate_form(thisform) {
with(thisform) {
if (validate_required("RADProduct_Step2", "vld_RADProduct_Step2", "Product must be filled out!") == false) {
document.getElementById("RADProduct_Step2").focus();
return false;
}
if (validate_required("Name_Step2", "vld_Name_Step2", "Name must be filled out!") == false) {
document.getElementById("Name_Step2").focus();
return false;
}
if (validate_required("Email_Step2", "vld_Email_Step2", "Email must be filled out!") == false) {
document.getElementById("Email_Step2").focus();
return false;
}
if (validate_required("PhoneNum_Step2", "vld_PhoneNum_Step2", "Phone Number must be filled out!") == false) {
document.getElementById("PhoneNum_Step2").focus();
return false;
}
if (validate_required("Address_Step2", "vld_Address_Step2", "Address must be filled out!") == false) {
document.getElementById("Address_Step2").focus();
return false;
}
if (validate_required("City_Step2", "vld_City_Step2", "City must be filled out!") == false) {
document.getElementById("City_Step2").focus();
return false;
}
if (validate_required("StateProvince_Step2", "vld_StateProvince_Step2", "State/Province must be filled out!") == false) {
document.getElementById("StateProvince_Step2").focus();
return false;
}
if (validate_required("PostalCode_Step2", "vld_PostalCode_Step2", "Postal Code/Zip Code must be filled out!") == false) {
document.getElementById("PostalCode_Step2").focus();
return false;
}
if (validate_required("Country_Step2", "vld_Country_Step2", "Country must be filled out!") == false) {
document.getElementById("Country_Step2").focus();
return false;
}
document.getElementById('submit_web_form').disabled = true;
}
}
</script>
<form action="https://www.methodintegration.com/method/timezonerouter.aspx?url=https://www.methodintegration.com/MethodWebForms/submit.aspx" onsubmit="return validate_form(this)" method="POST">
<input type="hidden" name="oid" value="2HVXMpRyZhdsD2zWVU2b/wcQJIybAK5IuuC3qNYwD34=" />
<input type="hidden" name="retURL" value="excluded for secuirty reasons" />
<input type="hidden" name="formName" value="Request_A_Demo" />
<table>
<tr>
<td class="plainBoxHeading" colspan="2" valign="top" style="border-top:0px; border-bottom:0px; border-left:3px solid #ED1D26; background:#e1e1e1; color:#555;">Demo Request</td>
</tr>
<tr>
<td valign="top">
<label for="RADProduct_Step2">Product (type in model #):</label>
</td>
<td>
<input type="text" id="RADProduct_Step2" name="RADProduct_Step2" maxlength="255" size="20" value="" />
<span id="vld_RADProduct_Step2" style="color:Red">*</span>
</td>
</tr>
<tr>
<td valign="top">
<label for="Quantity_Step2">Quantity:</label>
</td>
<td>
<input type="text" id="Quantity_Step2" name="Quantity_Step2" maxlength="255" size="20" value="" />
</td>
</tr>
<tr>
<td class="plainBoxHeading" colspan="2" valign="top" style="border-top:0px; border-bottom:0px; border-left:3px solid #ED1D26; background:#e1e1e1; color:#555;">Customer Information</td>
</tr>
<tr>
<td valign="top">
<label for="Name_Step2">Name:</label>
</td>
<td>
<input type="text" id="Name_Step2" name="Name_Step2" maxlength="31" size="20" value="" />
<span id="vld_Name_Step2" style="color:Red">*</span>
</td>
</tr>
<tr>
<td valign="top">
<label for="Company_Step2">Company:</label>
</td>
<td>
<input type="text" id="Company_Step2" name="Company_Step2" maxlength="255" size="20" value="" />
</td>
</tr>
<tr>
<td valign="top">
<label for="Email_Step2">Email:</label>
</td>
<td>
<input type="text" id="Email_Step2" name="Email_Step2" maxlength="1023" size="20" value="" />
<span id="vld_Email_Step2" style="color:Red">*</span>
</td>
</tr>
<tr>
<td valign="top">
<label for="PhoneNum_Step2">Phone Number:</label>
</td>
<td>
<input type="text" id="PhoneNum_Step2" name="PhoneNum_Step2" maxlength="255" size="20" value="" />
<span id="vld_PhoneNum_Step2" style="color:Red">*</span>
</td>
</tr>
<tr>
<td valign="top">
<label for="Address_Step2">Address:</label>
</td>
<td>
<input type="text" id="Address_Step2" name="Address_Step2" maxlength="255" size="20" value="" />
<span id="vld_Address_Step2" style="color:Red">*</span>
</td>
</tr>
<tr>
<td valign="top">
<label for="City_Step2">City:</label>
</td>
<td>
<input type="text" id="City_Step2" name="City_Step2" maxlength="255" size="20" value="" />
<span id="vld_City_Step2" style="color:Red">*</span>
</td>
</tr>
<tr>
<td valign="top">
<label for="StateProvince_Step2">State Province:</label>
</td>
<td>
<input type="text" id="StateProvince_Step2" name="StateProvince_Step2" maxlength="255" size="20" value="" />
<span id="vld_StateProvince_Step2" style="color:Red">*</span>
</td>
</tr>
<tr>
<td valign="top">
<label for="PostalCode_Step2">Postal Code/Zip Code:</label>
</td>
<td>
<input type="text" id="PostalCode_Step2" name="PostalCode_Step2" maxlength="255" size="20" value="" />
<span id="vld_PostalCode_Step2" style="color:Red">*</span>
</td>
</tr>
<tr>
<td valign="top">
<label for="Country_Step2">Country:</label>
</td>
<td>
<select type="select" id="Country_Step2" name="Country_Step2" style="width: 150px;">
<option value="United States" title="United States">United States</option>
<!-- other countrys were removed because of formating issues -->
<!-- this div is to add the reCAPTCHA widget onto webpage(key is excluded for secuirty reasons -->
<div class="g-recaptcha" data-sitekey=""></div>
<input type="submit" name="submit_web_form" id="submit_web_form" value="Submit" />
</form>
googles reCAPTCHA PHP code to implement
<PHP
$url = 'https://www.google.com/recaptcha/api/siteverify';
$privateKey = "6LdVfCITAAAAAAnPZyAy9r2sTZcwrJl0cXk4tq8X";
$response = file_get_contents($url."?secret=".$privateKey."&response=".$_POST['g-recaptcha-response']."&remoteip=".$_SERVER['REMOTE_ADDR']);
$data = json_decode($response);
if(isset($data->success) AND $data->success==true){
//// True - What happens when user is verified(CAPTCHA PASSED)
echo "recaptcha PASS";
echo '<script language="javascript">';
echo 'alert("message successfully sent")';
echo '</script>';
}else{
//False - What happens when user is not verified (CAPTCHA FAILED)
echo '<script language="javascript">';
echo 'alert("message unsuccessfully sent")';
echo '</script>';
}
?>
Aucun commentaire:
Enregistrer un commentaire