javascript - 如何创建带验证的谷歌验证码

Question

我想添加谷歌验证码并验证我的所有字段都正常工作但是当我添加谷歌验证码时它不起作用我在下面分享我的代码。在此先感谢.. 另请检查以下链接单击此处 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>

Answer 1

您可以使用“getResponse()”预定义函数进行验证。

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

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