如何使用验证创建Google Captcha

时间:2016-07-18 11:12:58

标签: javascript jquery css html5 twitter-bootstrap

我想添加google Captcha验证我的所有字段都正常工作但是当我添加谷歌验证码时它不起作用我在下面分享我的代码。 在此先感谢..另请查看以下链接点击此处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);
        }
    });
&#13;
input[type="submit"]:disabled {
    background-color: red;
}
.error-msg{
color:#fff;}
&#13;
<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>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:0)

您可以使用&#34; getResponse()&#34;用于验证的预定义函数。

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;
   }
}