How can I validate reCAPTCHA client side using Javascript

Question

I have a form located in an html file. I am trying to add an reCAPTCHA check box to it. I obviously want the reCAPTCHA to work properly, while being a part of my form validation code. Meaning, I do not want the form to be submitted unless the reCAPTCHA is checked. Here is my code:

    <form method="post" name="myemailform" action="pricingForm.php" onsubmit="return validateform();">
    <label for='sqft'>Estimated Quantity Needed: <span style="color: #f00;">*</span></label><br>
        <input type="text" name="sqft" size="5%"></li>
        <li>
        <label for='Units'>Units <span style="color: #f00;">*</span></label><br>
        <select name="Units" >
        <option value="000">(select one)</option>
        <option value="Each">Each</option>
        <option value="SQFT">SQ.FT.</option></select></li><br />
        <li>
        <label for='comments'>Comments</label> <br>
        <textarea  style="width: 500px; height: 150px;" name="comments"></textarea></li><br /><br />

        <li><div class="g-recaptcha" id="rcaptcha" data-sitekey="6LfdmSgUAAAAADxP1JYxU68gxYjCXEZNH2z0uS9f"> </div>
</li>

    <div class="small_container_left">      
    <input class="btn" type="submit" name='submit' id="btn-validate" value="Submit To Merge" size="100%"></div></form>

    <div class="small_container_right">
        <button class="closeButton" onclick="location.href='#body';">Back To <span style="font-family:raleway-bold;">extreme</span><span style="font-family:raleway-semi">concrete</span><span style="font-size: 13px;"><sup>™</sup></span> Page</button></a></div>

<script language="JavaScript" type="text/javascript"
xml:space="preserve">
var frmvalidator  = new Validator("myemailform");
frmvalidator.EnableMsgsTogether();
frmvalidator.addValidation("project","req","Enter the name of your project");
frmvalidator.addValidation("phoneNumber","req","Enter your phone number");
frmvalidator.addValidation("phoneNumber","maxlen=10","Enter a valid phone number");
frmvalidator.addValidation("phoneNumber","minlen=10","Enter a valid phone number");
frmvalidator.addValidation("phoneNumber","numeric","Enter a valid phone number");
frmvalidator.addValidation("projectLocation","req","Enter your project location");
frmvalidator.addValidation("color","dontselect=000","Please select a color");
frmvalidator.addValidation("Units","dontselect=000","Please select a unit");
frmvalidator.addValidation("projectType","dontselect=000","Please select the type of project");
frmvalidator.addValidation("material","dontselect=000","Please select a material");
frmvalidator.addValidation("sqft","req","Please enter your estimated quantity");
frmvalidator.addValidation("creating","dontselect=000","Please tell us what you want to create");
frmvalidator.addValidation("company","req","Enter your name");
frmvalidator.addValidation("email1","req","Enter a valid email address");
frmvalidator.addValidation("email1","email","Enter a valid email address");
frmvalidator.addValidation("web","req","Please enter your company website");
frmvalidator.setAddnlValidationFunction(DoCustomValidation);

$( '#btn-validate' ).click(function DoCustomValidation(){
  var $captcha = $( '#rcaptcha' ),
      response = grecaptcha.getResponse();

  if (response.length === 0) {
    $( '.msg-error').text( "reCAPTCHA is mandatory" );
    if( !$captcha.hasClass( "error" ) ){
      $captcha.addClass( "error" );
       alert('You did not check the reCAPTCHA!' );

    }
  } else
  {
    return true;
  }


});




</script><br />

This would be impossible(or quite hard) to do, since you cannot get client-side JS to accept and send a request from and to Google servers (which is how reCaptcha works). Even if you could do it, it would be very insecure because a malicious person could _just send POST requests themselves_, without having to pass the client-side reCaptcha. — ginkoid, Jul 11 '17 at 16:08
okay, gotcha. Will my frmvalidation javascript still work properly if I validate my reCaptcha in my php file (thats where all my form information gets posted). — TParker, Jul 11 '17 at 16:52
It looks good to me, although the easiest way is to test it! you can learn more about reCaptcha validation [here](https://developers.google.com/recaptcha/docs/verify) — ginkoid, Jul 11 '17 at 17:05
Possible duplicate of [How to make Google reCAPTCHA a required field?](https://stackoverflow.com/questions/29752659/how-to-make-google-recaptcha-a-required-field) — colecmc, Jul 12 '17 at 13:59

How can I validate reCAPTCHA client side using Javascript

0 Answers0