reCAPTCHA and JS form validation

Question

I am new to the Google reCAPTCHA and I am trying to implement this to an existing form validation.

This is my original code:

if(document.getElementById('naam').value.length == '' || document.getElementById('firma').value.length == '' || !filter_email.test(email.value)|| document.getElementById('bericht').value.length == '') {
        document.getElementById('submit').disabled = true; }
    else {
        document.getElementById('submit').disabled = false; }

Since I am new to reCAPTCHA I have been looking into a lot of online documents but they all are describing a different implementation.

I was hoping to simply implement it like:

if(grecaptcha.getResponse() == "success" || document.getElementById('naam').value.length == '' || document.getElementById('firma').value.length == '' || !filter_email.test(email.value)|| document.getElementById('bericht').value.length == '') {
    document.getElementById('submit').disabled = true; }
else {
    document.getElementById('submit').disabled = false; }

But that seems not to work, how to implement this so this correctly in my existing code?

EDIT 2 When using Invisible reCAPTCHA as suggested by Ralph Melhem I have changed my submit button to:

<input type="submit" name="submit" id="submit" value="Verstuur e-mail" class="g-recaptcha btn btn-info pull-right" data-sitekey="xxxx" data-callback="YourOnSubmitFn" disabled>

And kept my original form validation, but then the form is not send I see this error in the console ReCAPTCHA couldn't find user-provided function: YourOnSubmitFn

EDIT 3

My new code now looks like:

<!-- reCAPTCHA -->
<script src="https://www.google.com/recaptcha/api.js"></script>
<script>
function onSubmit(token) {
  document.getElementById("contact").submit();
}
</script>

<form name="contact" action="#" method="post">

<div class="col-lg-6">

    <div class="form-group input-group" id="naam_div">
        <input type="text" class="form-control" id="naam" name="naam" value="" placeholder="Uw naam" onkeyup="validate()">
        <span class="glyphicon glyphicon-warning-sign form-control-feedback" id="naam_glyp"></span>
    </div>

    <div class="form-group input-group" id="firma_div">
        <input type="text" class="form-control" id="firma" name="firma" value="" placeholder="Uw firma" onkeyup="validate()">
        <span class="glyphicon glyphicon-warning-sign form-control-feedback" id="firma_glyp"></span>
    </div>

    <div class="form-group input-group" id="email_div">
        <input type="text" class="form-control" id="email" name="email" value="" placeholder="Uw email adres" onkeyup="validate()">
        <span class="glyphicon glyphicon-warning-sign form-control-feedback" id="email_glyp"></span>
    </div>

    <div class="form-group input-group" id="bericht_div">
      <textarea name="bericht" id="bericht" class="form-control" rows="5" placeholder="Type hier uw bericht" onkeyup="validate()"></textarea>
        <span class="glyphicon glyphicon-warning-sign form-control-feedback" id="bericht_glyp"></span>
    </div>

  <input type="submit" name="submit" id="submit" value="Verstuur e-mail" class="g-recaptcha btn btn-info pull-right" data-sitekey="*************" data-callback="onSubmit" data-size="invisible" disabled>

</div>

</form>

<script>
function validate()
{
    // naam
    if(document.getElementById('naam').value.length == '') {
        document.getElementById('naam_div').className = "form-group input-group has-feedback";
        document.getElementById('naam_glyp').className = "glyphicon glyphicon-warning-sign form-control-feedback"; }
    else {
        document.getElementById('naam_div').className = "form-group input-group has-feedback";
        document.getElementById('naam_glyp').className = "glyphicon glyphicon-ok form-control-feedback"; }

    // firma
    if(document.getElementById('firma').value.length == '') {
        document.getElementById('firma_div').className = "form-group input-group has-feedback";
        document.getElementById('firma_glyp').className = "glyphicon glyphicon-warning-sign form-control-feedback"; }
    else {
        document.getElementById('firma_div').className = "form-group input-group has-feedback";
        document.getElementById('firma_glyp').className = "glyphicon glyphicon-ok form-control-feedback"; }

    // email
    var email = document.getElementById('email');
    var filter_email = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;

    if(document.getElementById('email').value == false) {
        document.getElementById('email_div').className = "form-group input-group has-feedback";
        document.getElementById('email_glyp').className = "glyphicon glyphicon-warning-sign form-control-feedback"; }
    else if (!filter_email.test(email.value)) {
        document.getElementById('email_div').className = "form-group input-group has-error has-feedback";
        document.getElementById('email_glyp').className = "glyphicon glyphicon-remove form-control-feedback"; }
    else {
        document.getElementById('email_div').className = "form-group input-group has-feedback";
        document.getElementById('email_glyp').className = "glyphicon glyphicon-ok form-control-feedback"; }

    // bericht
    if(document.getElementById('bericht').value.length == '') {
        document.getElementById('bericht_div').className = "form-group input-group has-feedback";
        document.getElementById('bericht_glyp').className = "glyphicon glyphicon-warning-sign form-control-feedback"; }
    else {
        document.getElementById('bericht_div').className = "form-group input-group has-feedback";
        document.getElementById('bericht_glyp').className = "glyphicon glyphicon-ok form-control-feedback"; }

    // submit form
    if(document.getElementById('naam').value.length == '' || document.getElementById('firma').value.length == '' || !filter_email.test(email.value)|| document.getElementById('bericht').value.length == '') {
        document.getElementById('submit').disabled = true; }
    else {
        document.getElementById('submit').disabled = false; }
}
</script>

The live version is here .

When I use data-callback="onSubmit" I have this error in my console Uncaught (in promise) null And if I use data-callback="dataFallback" I have this error ReCAPTCHA couldn't find user-provided function: dataFallback

Answer 1

For the invisible reCaptcha, you can set your form button as follows:

<button class="g-recaptcha btn btn-primary standard-button2 ladda-button" data-sitekey="YOURSITEKEY" data-callback="dataFallback"  data-size="invisible" type="submit" id="submit" name="submit" data-style="expand-left">Send Message</button>

and include the script

<script src="https://www.google.com/recaptcha/api.js" async defer></script>
<script>
   function onSubmit(token) {
     document.getElementById("YOURFORMNAME").submit();
   }
 </script>

This will handle the validation you're trying to achieve. If you still want to do it your way, I can help you clean it up, but I believe the above way is the most non-invasive for your code