Creating a Google Captcha with validation is a straightforward process that can enhance the

I am having issues with adding Google Captcha to my form. Despite all fields working properly, the Captcha integration seems to be causing some disruptions. I have included my code below. Thank you in advance for your help. Please also check the following link: Click Here Form live link

$('#test').bootstrapValidator({
    feedbackIcons: {
        valid: 'glyphicon glyphicon-ok',
        invalid: 'glyphicon glyphicon-remove',
        validating: 'glyphicon glyphicon-refresh'
    },


    fields: {
        firstName: {
            validators: {
                notEmpty: {
                    message: '<span class="error-msg">A name is required.</span>'
                }
            }
        },
        email: {
            validators: {
                notEmpty: {
                    message: '<span class="error-msg">An email address is required.</span>'
                },
                emailAddress: {
                    message: '<span class="error-msg">Email address is not valid.</span>'
                }
            }
        },
        phone: {
            validators: {
                notEmpty: {
                    message: '<span class="error-msg">A phone number is required.</span>'
                }
            }
        },
        state: {
            validators: {
                notEmpty: {
                    message: '<span class="error-msg">A state is required.</span>'
                }
            }
        },
        value: {
            validators: {
                notEmpty: {
                    message: '<span class="error-msg">A property value is required.</span>'
                }
            }
        },
        loan_amount: {
            validators: {
                notEmpty: {
                    message: '<span class="error-msg">A loan amount is required.</span>'
                }
            }
        },
        loanpurpose: {
            validators: {
                notEmpty: {
                    message: '<span class="error-msg">A loan purpose is required.</span>'
                }
            }
        }       
    }
});


$('#test').on('status.field.bv', function(e, data) {
    formIsValid = true;
    $('.form-group',$(this)).each( function() {
        formIsValid = formIsValid && $(this).hasClass('has-success');
    });
        
    if(formIsValid) {
        $('.submit-button', $(this)).attr('disabled', false);
    } else {
        $('.submit-button', $(this)).attr('disabled', true);
    }
});
input[type="submit"]:disabled {
    background-color: red;
}
.error-msg{
color:#fff;}
<script src="http://skyliteweb.in/form/jquery.min.js"></script>
<script src="http://skyliteweb.in/form/0a3b9034e109d88d72f83c9e6c9d13b7.js"></script>
<script type="text/javascript" src="https://www.google.com/recaptcha/api.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" >
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" >
<form id="test" action="test.php">
       
        <div class="form-group">
            <input type="text" class="form-control" name="firstName" placeholder="First name" />
        </div>        
    
    <div class="form-group">
        <input class="form-control" name="email" type="text" size="35" placeholder="Email*"></input>
    </div>
<div class="form-group">
            <input class="form-control"  type="text"  id="phone" name="phone" placeholder="Phone Number:" />
        </div>
<div class="form-group">
            <select class="select form-control" id="state" name="state">
       <option value="">Select State</option>
   <option value="Arizona">Arizona</option>
   <option value="California">California</option>
   <option value="Colorado">Colorado</option>
   <option value="Florida">Florida</option>
   <option value="Georgia">Georgia</option>
   <option value="Idaho">Idaho</option>
   <option value="Louisiana">Louisiana</option>
   <option value="Maryland">Maryland</option>
   <option value="Massachusetts">Massachusetts</option>
   <option value="Nebraska">Nebraska</option>
   <option value="New Mexico">New Mexico</option>
   <option value="North Carolina">North Carolina</option>
   <option value="Oregon">Oregon</option>
   <option value="Pennsylvania">Pennsylvania</option>
   <option value="South Carolina">South Carolina</option>
   <option value="Texas">Texas</option>
   <option value="Utah">Utah</option>
   <option value="Virginia">Virginia</option>
   <option value="Washington">Washington</option>
   <option value="Wyoming">Wyoming</option>
      </select>
        </div>
 <div class="form-group">
           <input class="form-control" id="value" type="text" name="value"  placeholder="Value" />
        </div>
 <div class="form-group">
            <input class="form-control" id="loan_amount" type="text" name="loan_amount"  placeholder="loan Amount" />
        </div>
   <div class="form-group">
            <select class="select form-control" id="loanprogram" name="loanpurpose" >
       <option value="">Loan Purpose</option>
   <option value="Purchase">Purchase</option>
   <option value="Refinance Current Loan">Refinance Current Loan</option>
   <option value="Refinance &amp; Cash-Out">Refinance &amp; Cash-Out</option>
      </select>
        </div>
<div class="g-recaptcha" data-sitekey="6Le-AR0TAAAAAPJ_jRb62dQlMWSoLl0a1P73NxJW"></div>
    <input class="btn btn-lg btn-success submit-button" style="width: 100%;" value="Sign Up!" type="submit" disabled></input>
</form>

javascriptjquerycsshtmltwitter-bootstrap

Answer №1

To ensure proper validation, you can utilize the built-in function "getResponse()".

function verifyInput(){
   var errorMessage = '';
   if($('#name').val() == '') errorMessage += 'Invalid Name';
   if($('#email').val() == '') errorMessage += 'Invalid Email';
   if($('#phone').val() == '') errorMessage += 'Invalid Phone';

   if(!grecaptcha.getResponse()) errorMessage += 'Please confirm you are not a robot';
   if(errorMessage){
      alert(errorMessage);
      return false;
   }
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

JavaScript: Increasing the date by a certain number of days

I've been researching various topics and so far, I haven't come across one that addresses my specific issue. Here's the task at hand: 1) Extract a bill date in the mm/dd/yy format, which is often not today's date. 2) Add a dynamic ...

javascript

Is it possible to use Vuejs v-model for a complete form instead of individual inputs?

Note: This solution is applicable for Vue 2.X I am currently working on a unique Vue.js component that has the ability to generate "custom" forms. This component essentially functions as a standalone form with multiple input fields. Users have the option ...

javascriptvue.js

The interval between successive ajax requests

Seeking assistance with calling a service that returns one row of data at a time. The goal is to fetch 100 rows, with a specified time gap between each hit to the service, ideally around 200 ms. Previously used jquery for similar calls: for i=1 to 100 ...

jqueryajax

Iterate over the JSON data and evaluate the timestamps for comparison

I am attempting to iterate through this JSON data and compare the "start_time" and "end_time" values to ensure that there are no overlaps. However, I am struggling to implement this functionality. While researching, I came across a resource on how to vali ...

javascriptjqueryjson

Place the <span> element at the bottom of the <ul> list

Struggling to align the captions of an image carousel at the bottom of the <ul>. No matter what I try, it just doesn't look right. Check out my Fiddle here Below is the HTML structure: <div class="carousel"> <ul> <l ...

htmlcss

The feature of option display is not supported on Safari browser

I am facing an issue with the functionality of two dropdown menus. The options in the second dropdown are supposed to be shown based on the selection made in the first dropdown. While this feature works perfectly in Chrome, it seems to be malfunctioning i ...

javascriptjqueryhtmlcsssafari

Collapse the accordion when the search query is less than or equal to 0

I'm having trouble making the accordion open both when the user has typed something into the search bar and when someone clicks to open it. I can get them to work individually, but not together. If I use this code: <accordion-group is-open="statu ...

javascriptangularjs

The error message "gulp error - _.flattenDeep is not a function when using gulp.watch" is indicating

Whenever I run a watch task, why am I encountering the TypeError: _.flattenDeep is not a function error? Below is the content of my gulpfile.js : var gulp = require('gulp'); var sass = require('gulp-sass'); var sourcemaps = require(&a ...

javascriptnode.jsnpmsassgulp

What is the best way to show JavaScript output with span style?

I have added a translation feature that allows users to switch paragraphs to French when clicked. Each paragraph now has the first word wrapped in a span with a CSS class that enlarges and colors the text. However, I am facing an issue where when switchi ...

javascripthtmlcss

Issue with React submit button for posting data is not functioning as intended

My dilemma lies within a Modal component containing a Form and Button. The goal is to trigger a POST request (managed in a separate file) upon the user clicking the button, which will run a simulation using the validated input values. Surprisingly, the onC ...

javascriptreactjsrestreact-bootstrapflux

What is the best way to stop this Jquery slider from moving?

I've been struggling with this issue for what feels like forever, and it's driving me crazy! I have a slider on the homepage that I'm trying to enhance with a "click to pause" feature (and maybe even a click to resume, for good measure). I ...

javascriptjquerypluginsslidercycle

Using ThreeJS/WebGL to Send Functions to Shaders

I have created a custom noise function that accepts a 3D coordinate (x, y, z) and returns a noise value between 0 and 1. I am interested in incorporating this function into my vertex shader to animate vertex positions. Can I access this external function f ...

javascriptthree.jswebgl

Retrieve the chosen option from a dropdown menu and transfer it to the submit button in PHP

I have a unique situation where I need to extract and store selected values from two separate drop-down menus generated from arrays. The goal is to pass these selected values in the submit button link. For example, if a user selects "123" for email and "t ...

javascriptphphtmljquery

Vue js is throwing an error message that says "Reading 'push' property of undefined is not possible"

I've encountered an issue while trying to navigate to other routes. The error I'm receiving is: Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'push') at eval (JoinRoom.vue?bd9d:74:1) This is how I pu ...

javascriptvue.jsvuejs2

Guide to securely authenticate on Google Drive API asynchronously with the help of AngularJS and HTML

Is it possible for someone to help me figure out how to authenticate asynchronously with the Google Drive API using AngularJS and HTML? I seem to be stuck on the gapi.auth.authorize call because the callback function is not being called. Below is a snippet ...

htmlangularjs

Divergent outcomes observed in various browsers when fetching XMLHttpRequest responseText

Utilizing XMLHttpRequest responseText to retrieve a server txt file and populate the contents of that file into an editable text box has been my recent task. The txt file consists of concise lines of letters separated by new lines. Users have the option to ...

javascripthtmlajaxinternet-explorerget

JS Implementation of the Coin Change Algorithm

I've been grappling with this algorithm for the past few days, but unfortunately I haven't been able to come up with a successful solution yet. The available solutions seem to be too advanced for my current level of understanding. This problem mu ...

javascriptif-statementcoin-change

Issue with Chrome not triggering onMouseEnter event when an element blocking the cursor disappears in React

Important Note: This issue seems to be specific to Chrome Currently, React does not trigger the onMouseEnter event when a blocking element disappears. This behavior is different from standard JavaScript events and even delegated events. Below is a simpli ...

javascriptreactjsgoogle-chrome

What is the best way to extract data from two dropdown menus and send it to separate URLs?

I need assistance with extracting the selected year value from the first dropdown. I would like to append this value to the URL of the header page and also to the options in the second dropdown. This way, when I select a PHP page from the second dropdown ...

javascriptphphtmlajax

Organized Styled-components

Considering implementing styled-components in my application and questioning the best organizational approach. Usually, styled-components are associated with a particular component for increased reusability. However, what is the recommended method for us ...

cssreactjsstyled-components