Seguramente muchos uséis en vuestras aplicaciones/páginas web el sistema de captcha de Google, también conocido como “Recaptcha“. Bien, pues hoy vamos a aprender como comprobar si el visitante ha introducido correctamente el captcha sin tener que recargar la pagina, utilizando Ajax através de jQuery.

  • Lo primero de todo, tenemos que tener una cuenta de Google y darnos de alta en la web de Recaptcha.
  • Aquí tenemos que dar de alta nuestra página web, esto es para que nos proporcionen las claves necesarias que usa el script.
  • Ahora nos descargamos la librería PHP desde aquí.

La librería que hemos descargado incluye varios archivos con ejemplos, pero nosotros sólo vamos a utilizar el archivo que contiene la librería, llamado “recaptchalib.php“.

Vamos con el código:

Primero, vamos a crear el archivo “comprobar.php” que es el encargado de comprobar desde el lado servidor si se ha introducido bien el captcha:

require_once('recaptchalib.php');
 $privatekey = "tu clave privada";
 $resp = recaptcha_check_answer ($privatekey,$_SERVER["REMOTE_ADDR"],$_POST["recaptcha_challenge_field"],$_POST["recaptcha_response_field"]);

 if (!$resp->is_valid) {
	//ERROR EN EL CAPTCHA
	echo 0;
 }else{
	//CAPTCHA CORRECTO
	echo 1;
 }

En la variable “$privatekey” tenéis que introducir vuestra clave privada que os han proporcionado al registrar vuestro sitio en la web de Recaptcha.

Ahora vamos a crear nuestro formulario, podeis llamar el archivo como queráis:

  • Primero incluimos la librería jQuery:
  • <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    
  • Ahora vamos con la función en jQuery que se encarga de comprobar el resultado con Ajax:
<script>
$(function(){
		
	function captcha(){
		var v1 = $("input#recaptcha_challenge_field").val();
		var v2 = $("input#recaptcha_response_field").val();
			
		$.ajax({
			type: "POST",
			url: "comprobar.php",
			data: {
                      	    "recaptcha_challenge_field" : v1, 
                      	    "recaptcha_response_field" : v2
                 	},
			dataType: "text",
			error: function(){
				alert("error petición ajax");
			},
			success: function(data){ 
				alert(data);
			}
		});
		
	}
	
	$("#boton").click(captcha);
		
});
</script>
  • Expliquemos esto un poco:
  • Primero obtenemos los valores del Recaptcha introducidos en el formulario:
  • var v1 = $("input#recaptcha_challenge_field").val();
    var v2 = $("input#recaptcha_response_field").val();
    
  • Hacemos la petición através de Ajax:
  • $.ajax({
    	type: "POST", //Método a usar
    	url: "comprobar.php", //Url del archivo
    	data: "recaptcha_challenge_field="+v1+"&recaptcha_response_field="+v2,
            /*data: son los valores que le mandamos a 'comprobar.php' por
            el método POST*/
    	dataType: "html", //el tipo de dato que se espera recibir
    	error: function(){
    		alert("error petición ajax");
            //muestra una alerta si no se realiza la petición
    	},
    	success: function(data){ 
    		alert(data);
            /*devuelve el resultado de la petición en la variable  
            'data' y lo muestra en una alerta*/
    	}
    });
    
  • Se ejecuta la función al hacer click en el botón con ID “boton” del formulario:
  • $("#boton").click(captcha);
    
  • Creamos nuestro formulario:
  • <form action="enviar_email.php" method="post">
    <?php
          //muestra el recaptcha en el formulario
          require_once('recaptchalib.php');
          $publickey = "tu clave publica";
          echo recaptcha_get_html($publickey);
    ?>
    <input type="button" value="aceptar" id="boton"  />
    </form>
    

    En la variable “$publickey” va vuestra clave pública.

  • Aquí el código completo de la página con el formulario:
  • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>http://blog.reaccionestudio.com/</title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script>
    	$(function(){
    		
    		function captcha(){
    			var v1 = $("input#recaptcha_challenge_field").val();
    			var v2 = $("input#recaptcha_response_field").val();
    			
    			$.ajax({
    				type: "POST",
    				url: "comprobar.php",
    				data: "recaptcha_challenge_field="+v1+"&recaptcha_response_field="+v2,
    				dataType: "html",
    				error: function(){
    					alert("error petición ajax");
    				},
    				success: function(data){ 
    					alert(data);
    				}
    			});
    			
    		}
    		
    		$("#boton").click(captcha);
    		
    	});
    </script>
    </head>
    
    <body>
    <form action="enviar_email.php" method="post">
    	<?php
          require_once('recaptchalib.php');
          $publickey = "tu clave pública";
          echo recaptcha_get_html($publickey);
        ?>
        <input type="button" value="aceptar" id="boton"  />
    </form>
    </body>
    </html>
    

Para personalizarlo, yo haría que en el “success:” del método “$.ajax” de jQuery, si la variable “data” es incorrecta me mostrara un mensaje avisando al visitante, y si es correcto, que mande el formulario. Algo como esto:

success: function(data){ 
	if(data == 0){
		$("#msjform").html("El código de seguridad introducido es incorrecto.");
		Recaptcha.reload(); //recarga Recaptcha.
	}else if(data == 1){
		$("#formulario").submit();	
	}
}

Sobre Reacción Estudio

Somos un estudio informático formado por jóvenes centrados en el desarrollo web, el diseño gráfico y la fotografía. Puedes solicitar presupuesto para tu proyecto a través de nuestra página web o por teléfono, pero en este blog hablaremos de todo lo que engloba el desarrollo web a día de hoy.


  • http://youtopia.com.ar Elias

    hola, queria preguntar que si eso, tambien se puede agregar a un ajax ya creado, que junta los datos de los campos, y muestra mensajes de error, y comprueba los demas campos, quisiera saber si se podria o me podria mostrar como se hace, youtopia.com.ar/js/forms.js ahi esta el javascript. y quiero añadirle recaptcha.

  • admin

    Claro que se puede hacer, tan sólo tienes que añadir la función $.ajax que hay más arriba en el momento que quieras validar el captcha. Es decir, tu validas que haya por ejemplo un nombre de usuario y no esté vacío el campo, las contraseña, el email, etc, y cuando llegues al captcha metes esa función:

    $.ajax({
          type: "POST", //Método a usar
          url: "comprobar.php", //Url del archivo
          data: "recaptcha_challenge_field="+v1+"&recaptcha_response_field="+v2,
            /*data: son los valores que le mandamos a 'comprobar.php' por
            el método POST*/
          dataType: "html", //el tipo de dato que se espera recibir
          error: function(){
                alert("error petición ajax");
            //muestra una alerta si no se realiza la petición
          },
          success: function(data){
                if(data == 0)
                    alert("Captcha incorrecto");
                else
                    $("#formulario").submit(); //manda el formulario
          }
    });
    

    Así de simple. Te recuerdo que tienes que seguir todos los pasos y crear todos los archivos que se comentan en el post.

    Un saludo.

  • http://youtopia.com.ar Elias
    ;(function($){
    	$.fn.forms=function(o){
    		return this.each(function(){
    			var th=$(this)
    				,_=th.data('forms')||{
    					errorCl:'error',
    					emptyCl:'empty',
    					invalidCl:'invalid',
    					notRequiredCl:'notRequired',
    					successCl:'success',
    					successShow:'4000',
    					mailHandlerURL:'Mail.php',
    					ownerEmail:'...@live.com.ar',
    					stripHTML:true,
    					smtpMailServer:'.....',
    					targets:'input,textarea',
    					controls:'a[data-type=reset],a[data-type=submit]',
    					validate:true,
    					rx:{
    						".name":{rx:/^[a-zA-Z'][a-zA-Z-' ]+[a-zA-Z']?$/,target:'input'},
    						".state":{rx:/^[a-zA-Z'][a-zA-Z-' ]+[a-zA-Z']?$/,target:'input'},
    						".email":{rx:/^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i,target:'input'},
    						".phone":{rx:/^\+?(\d[\d\-\+\(\) ]{5,}\d$)/,target:'input'},
    						".fax":{rx:/^\+?(\d[\d\-\+\(\) ]{5,}\d$)/,target:'input'},
    						".message":{rx:/.{20}/,target:'textarea'}
    					},
    					preFu:function(){
    						_.labels.each(function(){
    							var label=$(this),
    								inp=$(_.targets,this),
    								defVal=inp.val(),
    								trueVal=(function(){
    											var tmp=inp.is('input')?(tmp=label.html().match(/value=['"](.+?)['"].+/),!!tmp&&!!tmp[1]&&tmp[1]):inp.html()
    											return defVal==''?defVal:tmp
    										})()
    							trueVal!=defVal
    								&&inp.val(defVal=trueVal||defVal)
    							label.data({defVal:defVal})								
    							inp
    								.bind('focus',function(){
    									inp.val()==defVal
    										&&(inp.val(''),_.hideEmptyFu(label),label.removeClass(_.invalidCl))
    								})
    								.bind('blur',function(){
    									_.validateFu(label)
    									if(_.isEmpty(label))
    										inp.val(defVal)
    										,_.hideErrorFu(label.removeClass(_.invalidCl))											
    								})
    								.bind('keyup',function(){
    									label.hasClass(_.invalidCl)
    										&&_.validateFu(label)
    								})
    							label.find('.'+_.errorCl+',.'+_.emptyCl).css({display:'block'}).hide()
    						})
    						_.success=$('.'+_.successCl,_.form).hide()
    					},
    					isRequired:function(el){							
    						return !el.hasClass(_.notRequiredCl)
    					},
    					isValid:function(el){							
    						var ret=true
    						$.each(_.rx,function(k,d){
    							if(el.is(k))
    								ret=d.rx.test(el.find(d.target).val())										
    						})
    						return ret							
    					},
    					isEmpty:function(el){
    						var tmp
    						return (tmp=el.find(_.targets).val())==''||tmp==el.data('defVal')
    					},
    					validateFu:function(el){							
    						el.each(function(){
    							var th=$(this)
    								,req=_.isRequired(th)
    								,empty=_.isEmpty(th)
    								,valid=_.isValid(th)								
    							
    							if(empty&&req)
    								_.showEmptyFu(th.addClass(_.invalidCl))
    							else
    								_.hideEmptyFu(th.removeClass(_.invalidCl))
    							
    							if(!empty)
    								if(valid)
    									_.hideErrorFu(th.removeClass(_.invalidCl))
    								else
    									_.showErrorFu(th.addClass(_.invalidCl))								
    						})
    					},
    					getValFromLabel:function(label){
    						var val=$('input,textarea',label).val()
    							,defVal=label.data('defVal')								
    						return label.length?val==defVal?'nope':val:'nope'
    					}
    					,submitFu:function(){
    						_.validateFu(_.labels)							
    						if(!_.form.has('.'+_.invalidCl).length)
    							$.ajax({
    								type: "POST",
    								url:_.mailHandlerURL,
    								data:{
    									name:_.getValFromLabel($('.name',_.form)),
    									email:_.getValFromLabel($('.email',_.form)),
    									phone:_.getValFromLabel($('.phone',_.form)),
    									fax:_.getValFromLabel($('.fax',_.form)),
    									state:_.getValFromLabel($('.state',_.form)),
    									message:_.getValFromLabel($('.message',_.form)),
    									owner_email:_.ownerEmail,
    									stripHTML:_.stripHTML
    								},
    								success: function(){
    									_.showFu()
    								}
    							})			
    					},
    					showFu:function(){
    						_.success.slideDown(function(){
    							setTimeout(function(){
    								_.success.slideUp()
    								_.form.trigger('reset')
    							},_.successShow)
    						})
    					},
    					controlsFu:function(){
    						$(_.controls,_.form).each(function(){
    							var th=$(this)
    							th
    								.bind('click',function(){
    									_.form.trigger(th.data('type'))
    									return false
    								})
    						})
    					},
    					showErrorFu:function(label){
    						label.find('.'+_.errorCl).slideDown()
    					},
    					hideErrorFu:function(label){
    						label.find('.'+_.errorCl).slideUp()
    					},
    					showEmptyFu:function(label){
    						label.find('.'+_.emptyCl).slideDown()
    						_.hideErrorFu(label)
    					},
    					hideEmptyFu:function(label){
    						label.find('.'+_.emptyCl).slideUp()
    					},
    					init:function(){
    						_.form=_.me						
    						_.labels=$('label',_.form)
    
    						_.preFu()
    						
    						_.controlsFu()
    														
    						_.form
    							.bind('submit',function(){
    								if(_.validate)
    									_.submitFu()
    								else
    									_.form[0].submit()
    								return false
    							})
    							.bind('reset',function(){
    								_.labels.removeClass(_.invalidCl)									
    								_.labels.each(function(){
    									var th=$(this)
    									_.hideErrorFu(th)
    									_.hideEmptyFu(th)
    								})
    							})
    						_.form.trigger('reset')
    					}
    				}
    			_.me||_.init(_.me=th.data({forms:_}))
    			typeof o=='object'
    				&&$.extend(_,o)
    		})
    	}
    })(jQuery)
    $(window).load(function(){
    	$('#contact-form').forms({
    		ownerEmail:'facha_2000@live.com.ar'
    	})
    })

    ya probe agregandolo en donde dice “.bind(‘submit’,function(){
    if(_.validate)
    _.submitFu()
    else
    _.form[0].submit()
    return false
    })

    para cuando aprete “submit” lo verifique, y no, no funciona, probe tambien haciendo una verificacion y que al apretar submit lo valide pero en la operacion “_.submitFu”… y tampoco funciono, no se como hacerlo funcionar, pero ciertamente, deberia funcionar de algun modo, :/

  • admin

    Creo que el problema está cuando en la función $.ajax que utilizas, primero eliminaste el “dataType” y el “error:“, que son imprescindibles, para saber que tipo de valor devuelve la petición Ajax y si se llega a realizar correctamente la petición. Además, los valores que mandas en “data:” no los envías correctamente. La función $.ajax debería ser así:

    $.ajax({
    	//obtenemos los valores de los campos del formulario
    	var nombre = $(".name.").val();
    	var email = $(".email").val();
    	var phone = $(".phone").val();
    	var fax = $(".fax").val();
    	var state = $(".state").val();
    	var message = $(".message").val();
    	var owner_email = "...@live.com.ar";
    		
    	type: "POST",
    	url: "Mail.php",
    	data:"nombre="+nombre+"&email="+email+"&phone="+phone+"&fax="+fax+"&state="+state+"&message="+message+"&owner_email="+owner_email,
    	/* en DATA debemos poner los nombres de las variables $_POST que recoje el archivo Mail.php
    	junto con las variables del formulario. */
    	dataType: "html", //el tipo de dato que se espera recibir
        error: function(){
            alert("error petición ajax");
            //muestra una alerta si no se realiza la petición
        },
    	success: function(data){
                if(data == 0)
                    alert("Captcha incorrecto");
                else
                    _.showFu()
        }
    	
    })       
    
    • http://youtopia.com.ar Elias

      separemos un poco…

      
      ;(function($){
            $.fn.forms=function(o){
                  return this.each(function(){
                        var th=$(this)
                              ,_=th.data('forms')||{
                                    errorCl:'error',
                                    emptyCl:'empty',
                                    invalidCl:'invalid',
                                    notRequiredCl:'notRequired',
                                    successCl:'success',
                                    successShow:'4000',
                                    mailHandlerURL:'Mail.php',
                                    ownerEmail:'...@live.com.ar',
                                    stripHTML:true,
                                    smtpMailServer:'.....',
                                    targets:'input,textarea',
                                    controls:'a[data-type=reset],a[data-type=submit]',
                                    validate:true,
                                    rx:{
                                          ".name":{rx:/^[a-zA-Z'][a-zA-Z-' ]+[a-zA-Z']?$/,target:'input'},
                                          ".state":{rx:/^[a-zA-Z'][a-zA-Z-' ]+[a-zA-Z']?$/,target:'input'},
                                          ".email":{rx:/^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i,target:'input'},
                                          ".phone":{rx:/^\+?(\d[\d\-\+\(\) ]{5,}\d$)/,target:'input'},
                                          ".fax":{rx:/^\+?(\d[\d\-\+\(\) ]{5,}\d$)/,target:'input'},
                                          ".message":{rx:/.{20}/,target:'textarea'}
                                    },
      
      

      creo que eso selecciona los targets a travez de la forma, por los class de los label.

                                    preFu:function(){
                                          _.labels.each(function(){
                                                var label=$(this),
                                                      inp=$(_.targets,this),
                                                      defVal=inp.val(),
                                                      trueVal=(function(){
                                                                        var tmp=inp.is('input')?(tmp=label.html().match(/value=['"](.+?)['"].+/),!!tmp&&!!tmp[1]&&tmp[1]):inp.html()
                                                                        return defVal==''?defVal:tmp
                                                                  })()
                                                trueVal!=defVal
                                                      &&inp.val(defVal=trueVal||defVal)
                                                label.data({defVal:defVal})                                            
                                                inp
                                                      .bind('focus',function(){
                                                            inp.val()==defVal
                                                                  &&(inp.val(''),_.hideEmptyFu(label),label.removeClass(_.invalidCl))
                                                      })
                                                      .bind('blur',function(){
                                                            _.validateFu(label)
                                                            if(_.isEmpty(label))
                                                                  inp.val(defVal)
                                                                  ,_.hideErrorFu(label.removeClass(_.invalidCl))                                                             
                                                      })
                                                      .bind('keyup',function(){
                                                            label.hasClass(_.invalidCl)
                                                                  &&_.validateFu(label)
                                                      })
                                                label.find('.'+_.errorCl+',.'+_.emptyCl).css({display:'block'}).hide()
                                          })
                                          _.success=$('.'+_.successCl,_.form).hide()
                                    },
                                    isRequired:function(el){                                         
                                          return !el.hasClass(_.notRequiredCl)
                                    },
                                    isValid:function(el){                                      
                                          var ret=true
                                          $.each(_.rx,function(k,d){
                                                if(el.is(k))
                                                      ret=d.rx.test(el.find(d.target).val())                                                         
                                          })
                                          return ret                                     
                                    },
                                    isEmpty:function(el){
                                          var tmp
                                          return (tmp=el.find(_.targets).val())==''||tmp==el.data('defVal')
                                    },
                                    validateFu:function(el){                                         
                                          el.each(function(){
                                                var th=$(this)
                                                      ,req=_.isRequired(th)
                                                      ,empty=_.isEmpty(th)
                                                      ,valid=_.isValid(th)                                             
                                                 
                                                if(empty&&req)
                                                      _.showEmptyFu(th.addClass(_.invalidCl))
                                                else
                                                      _.hideEmptyFu(th.removeClass(_.invalidCl))
                                                 
                                                if(!empty)
                                                      if(valid)
                                                            _.hideErrorFu(th.removeClass(_.invalidCl))
                                                      else
                                                            _.showErrorFu(th.addClass(_.invalidCl))                                            
                                          })
                                    },
      

      creo que todo esto (de arriba) es para validad lo presentado, y mostrar mensajes de error, y abajo esta para obtener los datos, y despues ser adjuntado mas abajo.

      
      getValFromLabel:function(label){
                                          var val=$('input,textarea',label).val()
                                                ,defVal=label.data('defVal')                                           
                                          return label.length?val==defVal?'nope':val:'nope'
                                    }
      
      

      ahora lo de abajo, es para
      submit y validar si se ha expuesto algo en la forma, y asi enviarlo, si es validado, y enviar el mensaje de error, *Creo yo*

                                    ,submitFu:function(){
                                          _.validateFu(_.labels)                                     
                                          if(!_.form.has('.'+_.invalidCl).length)
                                                $.ajax({
                                                      type: "POST",
                                                      url:_.mailHandlerURL,
                                                      data:{
                                                            name:_.getValFromLabel($('.name',_.form)),
                                                            email:_.getValFromLabel($('.email',_.form)),
                                                            phone:_.getValFromLabel($('.phone',_.form)),
                                                            fax:_.getValFromLabel($('.fax',_.form)),
                                                            state:_.getValFromLabel($('.state',_.form)),
                                                            message:_.getValFromLabel($('.message',_.form)),
                                                            owner_email:_.ownerEmail,
                                                            stripHTML:_.stripHTML
                                                      },
                                                      success: function(){
                                                            _.showFu()
                                                      }
                                                })               
                                    },
      

      lo de abajo lo unico que creo que hace, es mostrar el mensaje de enviado y de error…

                                    showFu:function(){
                                          _.success.slideDown(function(){
                                                setTimeout(function(){
                                                      _.success.slideUp()
                                                      _.form.trigger('reset')
                                                },_.successShow)
                                          })
                                    },
      
      
                                    controlsFu:function(){
                                          $(_.controls,_.form).each(function(){
                                                var th=$(this)
                                                th
                                                      .bind('click',function(){
                                                            _.form.trigger(th.data('type'))
                                                            return false
                                                      })
                                          })
                                    },
                                    showErrorFu:function(label){
                                          label.find('.'+_.errorCl).slideDown()
                                    },
                                    hideErrorFu:function(label){
                                          label.find('.'+_.errorCl).slideUp()
                                    },
                                    showEmptyFu:function(label){
                                          label.find('.'+_.emptyCl).slideDown()
                                          _.hideErrorFu(label)
                                    },
                                    hideEmptyFu:function(label){
                                          label.find('.'+_.emptyCl).slideUp()
                                    },
                                    init:function(){
                                          _.form=_.me                              
                                          _.labels=$('label',_.form)
       
                                          _.preFu()
                                           
                                          _.controlsFu()
                                                                                           
                                          _.form
                                                .bind('submit',function(){
                                                      if(_.validate)
                                                            _.submitFu()
                                                      else
                                                            _.form[0].submit()
                                                      return false
                                                })
                                                .bind('reset',function(){
                                                      _.labels.removeClass(_.invalidCl)                                                  
                                                      _.labels.each(function(){
                                                            var th=$(this)
                                                            _.hideErrorFu(th)
                                                            _.hideEmptyFu(th)
                                                      })
                                                })
                                          _.form.trigger('reset')
                                    }
                              }
                        

      *esto, *lo de arriba* creo que indica que hace cada cosa*…

      _.me||_.init(_.me=th.data({forms:_}))
                        typeof o=='object'
                              &&$.extend(_,o)
                  })
            }
      })(jQuery)
      $(window).load(function(){
            $('#contact-form').forms({
                  ownerEmail:'hola@miemail.com.ar'
            })
      })

      en fin, quise poner tu codigo en

      .bind('submit',function(){
                                                      if(_.validate)
                                                            _.submitFu()
      ***********************AQUI**************
                                                      else
                                                            _.form[0].submit()
                                                      return false
      
                                    ,submitFu:function(){
      ********************AQUI*****
      
      
      _.validateFu(_.labels)                                     
                                          if(!_.form.has('.'+_.invalidCl).length)
              *AQUI******DANDO CUENTA DETERMINANDO EL NUMERO SALIDO, PONER if(data == 1){... *despues continua con lo que sigue, y bueno, 
      $.ajax({
                                                      type: "POST",
                                                      url:_.mailHandlerURL,
                                                      data:{
                                                            name:_.getValFromLabel($('.name',_.form)),
                                                            email:_.getValFromLabel($('.email',_.form)),
                                                            phone:_.getValFromLabel($('.phone',_.form)),
                                                            fax:_.getValFromLabel($('.fax',_.form)),
                                                            state:_.getValFromLabel($('.state',_.form)),
                                                            message:_.getValFromLabel($('.message',_.form)),
                                                            owner_email:_.ownerEmail,
                                                            stripHTML:_.stripHTML
                                                      },
                                                      success: function(){
                                                            _.showFu()
                                                      }
                                                })               
                                    },
      

      el codigo html es:

      
      <form id="contact-form" action="Mail.php" method="post" enctype="multipart/form-data">
      						<fieldset>
      					<label class="name">
      					<input value="Nombre" type="text" />
      															<span class="error">*No es un nombre valido.</span> <span class="empty">*Este espacio es requerido.</span>
      													</label>
      													<label class="email">
      														<input value="Correo electronico" type="text" />
      															<span class="error">*No es un Correo electronico valido.</span> <span class="empty">*Este espacio es requerido.</span>
      													</label>
      													<label class="phone">
      														<input value="Telefono" type="text" />
      															<span class="error">*No es un telefono valido.</span> <span class="empty">*Este espacio es requerido.</span>
      													</label>
      		<label class="message">
      														<textarea>Mensaje:</textarea>
      			<span class="error">*Mensaje es muy corto.</span> <span class="empty">*Este espacio es necesario.</span>
      </label>
      <div class="success">¡Forma de contacto enviada!<br>
      	<strong>Recibira una respuesta pronto. Gracias por contactarse.</strong>
      </div>
                <input id="submit" name="submit" value="Enviar" class="button2" type="submit" />
      

      bueno, en fin, quisiera que me ayudaras, si puedes, no soy ningun experto, pero es mas por aprender que lo hago, que por algun benificio mas que el aprendizaje mismo,

  • admin

    A ver, no pretendas utilizar estas funciones si no sabes jQuery. Es como intentar conducir un coche sin saber cómo funciona, te vas a estrellar seguro.

    Te recomiendo que aprendas Javascript, y después de esto jQuery.

    Aquí tienes uno de Javascript-> http://www.desarrolloweb.com/manuales/20/

    Y aquí el de jQuery -> http://www.desarrolloweb.com/manuales/manual-jquery.html

    Después de aprender esto, te resultará mucho más sencillo trabajar con jQuery, sabrás que hace exactamente tu código y podrás implementar tu validación con reCaptcha.

    Un saludo.

    • http://youtopia.com.ar Elias

      no es mi codigo, pero preguntaba como agregar tu codigo a mi ya existente codigo, veo que fue solo perdida de tiempo pedirte ayuda, veo que solo no sirve lo que presentas. y no necesito saber jquery para que un codigo ya existente pueda ser adaptado a otro. es una perdida de tiempo, eso es lo que es nada mas este blog.

      • admin

        Esto es un blog de desarrollo web, no una ONG.

        Todo lo que se publica aquí funciona correctamente. Yo ofrezco ayuda a la gente que tiene algún problema, pero lo que no voy a hacer, yo ni seguramente nadie, es hacer lo que pides gratis. Si tuvieras unos conocimientos básicos de jQuery, podrías adaptar esta función a tu código, pero como no los tienes, pretendes que alguien te dé el código hecho, listo para copiar y pegar. Eso no es así.

        Lo que más gracia me hace es éste último comentario tuyo, como un niño rabioso porque no le dieron lo que quería.

        Aquí te has coronado:

        y no necesito saber jquery para que un codigo ya existente pueda ser adaptado a otro“.

  • Sergio Andrés Ñustes

    Hola amigo en realidad me sirvieron mucho estas dos líneas:

    var v1 = $(“input#recaptcha_challenge_field”).val();
    var v2 = $(“input#recaptcha_response_field”).val();

    Lo de la validación cada quien implementa AJAX a su gusto, pero bien por el tutorial para los que no han trabajado con el tema. En mi caso estoy haciendo un sitio totalmente en AJAX, MVC y PHP y aparte de validar en AJAX que me sirvió mucho tu artículo (gracias), necesitaba también cargar los captchas por medio de AJAX, pues toda mi aplicación es en AJAX y no me podía dar el lujo, de recargar mi sitio sólo para ver un captcha. Así que para los que tienen la misma necesidad de yo, que aparte de validar por AJAX los captcha, también quieran cargarlos, los remito a la fuente oficial donde explican muy bien y hay un ejemplo:

    https://developers.google.com/recaptcha/docs/display?hl=es#AJAX

    Y de nuevo gracias por el tutorial.

  • Jorge Fonseca A.

    Hola amigo, una pregunta: esta página usa la libreria.php para validar?

    • Alberto

      ¿A qué librería y a qué parte de la página te refieres?

      • Jorge Fonseca A.

        Hola Alberto, gracias por responder. Tengo problema para validar el formulario con ajax. Empecé por comprobar que la librería recaptchalib.php estuviera actualizada, ejecutando directamente el archivo comprobar.php.
        Yo copié su formulario de contacto y el script pero no envía los datos al servidor ya que no devuelve mensajes cuando el captcha está correcto o no. No puedo encontrar la explicación.

        • Alberto

          No puedes ejecutar directamente el archivo “comprobar.php”, porque este archivo necesita recibir los datos introducidos en el recaptcha a través del método “POST”. Para enviar estos datos utilizamos el código jQuery que hay publicado en esta entrada del blog.

          Puedes instalarte la herramienta “Firebug” para tu navegador y te avisará si tu código Javascript contiene errores de ejecución, quizás por eso no está enviando los datos.

          • Jorge Fonseca A.

            Alberto., el script está correcto, pero siempre me devuelve el mensaje de código de seguridad incorrecto, pareciera que el archivo comprobar.php( en mi caso se llama validar.php) no recibiera los datos del formulario cuando se hace con jQuery porque cuando los envío directamente desde html con “post” si que los valida.

            Este es el script:$(document).ready(function(){

            $(“#contact_btn”).click(function(){

            if(validar_form()){

            var v1=$(“input#recaptcha_challenge_field”).val();

            var v2=$(“input#recaptcha_response_field”).val();

            $.ajax({

            type:”POST”,

            url:”validar.php”,

            data:{“recaptcha_challenge_field”:v1,”recaptcha_response_field”:v2},

            dataType:”text”,

            error:function(){alert(“error peticiu00f3n ajax”)},

            success:function(data)

            {if(data==”correcto”)enviar_email();

            else{$(“#msjform”).html(“Cu00f3digo de seguridad incorrecto.”);

            Recaptcha.reload()}}})}})});

          • Alberto

            Ese archivo lo único que hace es enviar el email con los datos que se han rellenado en el formulario.

          • Jorge Fonseca A.

            Lo tengo claro, mi pregunta es: a la variable data como le das el valor ” OK”?

          • Alberto

            La variable data de la petición ajax devuelve el valor de “comprobar.php”.

          • Jorge Fonseca A.

            Hay algo que no entiendo y es esto: en el script de formulario de contacto suyo parece esto:{if(data==”correcto”)enviar_email();else{$(“#msjform”).html(“Cu00f3digo de seguridad incorrecto.”);
            Mi pregunta: el valor que la variable data compara debe ser asignada el archivo comprobar.php ¿cómo lo hacen en php?.
            con un echo o $data=”correcto”?
            Saludos

          • Alberto

            si tu archivo php devuelve esto:

            echo “correcto”;

            luego en la función ajax comprobarás ese valor que tendrá la variable “data”, es decir:

            if(data == “correcto”)
            {
            alert(“Procedemos a enviar el email”);
            }

          • Jorge Fonseca A.

            ok, pero con el comando echo ese valor “correcto” me aparece en el html. No debería ser.

          • Alberto

            Creo que deberías mirarte unos tutoriales de PHP y jQuery antes de ponerte a tocar a ciegas.

          • Jorge Fonseca A.

            uhmmm, bueno, no esperaba esa respuesta. Buscaré ayuda por otro lado. Gracias

  • eduatro

    Gracias me sirvió de mucho ver como hacias el envio del lado del cliente con ajax y aunque no lo hize con php me ayudo bastante ver cuales eran los parametros que tenia que pasar a la api de recaptcha :)

  • ecr007

    Yo lo soluciono con serialize() y listo

  • Pingback: using reCAPTCHA with ajax…javascript loading problem - QuestionFocus()

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies.     ACEPTAR