entre Desarrolladores

Recibe ayuda de expertos

Registrate y pregunta

Es gratis y fácil

Recibe respuestas

Respuestas, votos y comentarios

Vota y selecciona respuestas

Recibe puntos, vota y da la solución

Pregunta

2votos

El usuario rellena un formulario nombre, emaily mensaje y se envía por correo electrónico. Al enviarlo se visualiza el div con id="correcto" el cual muestra un mensaje de confirmación. Para verificar que es humano utilizo invisible recaptchade Google.

Los 3 campos son obligatorios. Para ello utilizo bootstrapValidator en main.js

El problema es que cuando pulso el botón enviar directamente salta la verificación del captcha y no se verifica que el los 3 campos del formulario este llenos, con lo cual, se pueden enviar vacío

Parte del código index.php

<?php
require_once "recaptcha/src/autoload.php";
$secret = 'MY_SECRET_KEY';
if (isset($_POST["name"]) && $_POST["email"] && $_POST["mensaje"]) {
    $gRecaptchaResponse = isset($_POST["g-recaptcha-response"])? $_POST["g-recaptcha-response"] : null;
    $recaptcha = new \ReCaptcha\ReCaptcha($secret);
    $resp = $recaptcha->verify($gRecaptchaResponse, $_SERVER['REMOTE_ADDR']);
    /*
    if ($resp->isSuccess()) {
        die("El mensaje se ha enviado!");
    } else {
        die("beep bop!");
    }*/
}
?>
    <head>

        <script src="js/vendor/modernizr-2.8.3-respond-1.4.2.min.js"></script>

        <script src='https://www.google.com/recaptcha/api.js'></script>

        <script>
       function onSubmit(token) {
         document.getElementById("soporteForm").submit();
         $('#correcto').fadeIn();
       }

       </script>

    </head>
    <body>

              <form class="form-horizontal" id="soporteForm" method="post" action="ajaxSubmit.php" target="request">

                <div class="form-group">
                  <div class="col-sm-12">
                    <input type="text" class="form-control campos" placeholder="Izena" name="nombre" required>
                  </div>
                </div>

                <div class="form-group">
                  <div class="col-sm-12">
                    <input type="email" class="form-control campos" placeholder="Posta elektronikoa" name="email" required>
                  </div>
                </div>

                <div class="form-group">
                  <div class="col-sm-12">
                    <textarea class="form-control campos" placeholder="Mezua" name="mensaje" required></textarea>
                  </div>
                </div>

                <div class="form-group">
                  <div class="col-sm-12">
                    <button type="submit" class="btn btn-default g-recaptcha" data-sitekey="MY_SECRET_KEY" data-callback="onSubmit">Enviar</button>
                    <!--<input type="submit" class="btn btn-default g-recaptcha" data-sitekey="6Lc_bCEUAAAAAMzQcR1LYVl7593PKGPMdRPa0-D6" data-callback="onSubmit" value="Bidali"/>-->
                  </div>
                </div>

                <iframe name="request" style="display:none">

                </iframe>

                <div id="correcto">
                  El mensaje ha sido enviado correctamente
                </div>

              </form>

        <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.2.min.js"><\/script>')</script>

        <script src="js/vendor/bootstrap.min.js"></script>
        <script src="js/bootstrapValidator.js"></script>
        <script src="js/smooth-scroll.js"></script>
        <script src="js/waypoints.min.js"></script>
        <script src="js/main.js"></script>

    </body>
</html>

ficheromain.js


    $('#soporteForm').bootstrapValidator({
        message:"Esto no es válido",
        feedbackIcons:{
            valid:'glyphicon glyphicon-ok',
            invalid:'glyphicon glyphicon-remove',
            validating:'glyphicon glyphicon-refresh'
        },
        fields:{
            nombre:{
                validators:{
                    notEmpty:{
                        message: "Atal hau betebeharrekoa da"

                    },
                }

            },
            email:{
                validators:{
                    notEmpty:{
                        message: "Atal hau betebeharrekoa da"

                    },
                    emailAddress:{
                        message: "Honek ez dirudi posta elektroniko bat"

                    }
                }

            },
            mensaje:{
                validators:{
                    notEmpty:{
                        message: "Mezua ezin du hutsik egon"
                    }
                }

            }

        }
    }).on('success.form.bv', function(e){
        e.preventDefault();

        var $form = $(e.target);

        var bv = $form.data('bootstrapValidator');

        $.post($form.attr('action'), $form.serialize(), function(result){
            $('#correcto').fadeIn();
            console.log(result);
        }, 'json');
    });

});

Y este es el fichero ajaxSubmit.phpque envia el mail mediante php

<?php

$nombre = $_POST['nombre'];
$email = $_POST['email'];
$mensaje = $_POST['mensaje'];

$header = 'From: [email protected]' . "\r\n";
$header .= "X-Mailer:PHP/" . phpversion() . "\r\n";
$header .= "Mime-Version: 1.0 \r\n";
$header .= "Content-Type: text/plain";

$comentario = "Mezua bidalitako pertsona: " . $nombre . "\r\n";
$comentario .= "Bere posta elektronikoa: " . $email . "\r\n";
$comentario .= "Mezua: " . $mensaje . "\r\n";

$para = "[email protected]";
$asunto = "Lezo Landing Page-eko kontatua";

mail($para, $asunto, utf8_decode($comentario), $header);

// respuesta al servidor
$nombre = $_POST['nombre'];

echo json_encode(array(
        'Mensaje' => sprintf('Se recibió el correo de %s', $nombre)
    ));

2 Respuestas

2votos

gerko23 Puntos1930

hola @egoitz_gonzalez creo que puedes estrucuturar de forma diferente tu codigo JS, la funcion onSubmit, en el boton enviar, envia de una ves el formulario esto lo lanza antes de la verificacion

2votos

egoitz_gonzalez comentado

Efectivamente eso es lo que pasa sí. A mi me gustaría que primero se ejecutase la verificación y después la función onSubmit pero no sé como implementarlo.

2votos

sommer0123 Puntos440

Hola amigo bueno bueno mira la verdad nose porque complicas la vida demasiado si tan solo quieres validar que se escribe algo en los INPUT tan solo agrega la propiedad "required" a los input y listo, asi Jamas se ejecutara el PHP ni el JS si eso no esta valido y LISTO amigo problema solucionado.

TE PONGO ESTO PORQUE ES LO QUE ENTIENDO CON TU PROBLEMA ES TAN SOLO VALIDAR QUE SE ENVIA ALGO.

Espero que te ayude y si no me puedes comentar y con gusto te ayudo.

Aqui te dejo un link donde puedes ver mas sobre ese tema:

http://www.the-art-of-web.com/html/html5-form-validation/

1voto

egoitz_gonzalez comentado

Sí. Tienes razón. Con hoy en día HTML5 es posible lo que comentas pero esta web no es mía. Ahora me he puesto yo a trabajar con ella y el desarrollador anterior usó JQuery para darle unos efectos concretos a los avisos que recibe el usuario. Por eso debo de hacerlo de la manera que he preguntado.

Por favor, accede o regístrate para responder a esta pregunta.

Otras Preguntas y Respuestas


...

Bienvenido a entre Desarrolladores, donde puedes realizar preguntas y recibir respuestas de otros miembros de la comunidad.

Conecta