Validar formulario (unreachable code after return statement)

F3RC4O · #1 (**permalink**) 12/02/2016, 15:43

Hola a todos espero anden de lo mejor, saben me gustaría que me ayudaran con lo siguiente, lo que pasa es que tengo mi formulario y al momento de validarlo pues ahí todo ok, pero al momento de querer enviar los datos ya no me los envia, alguna ayuda? Debo aclarar que los datos los envío por ajax
Aquí mi formulario:

Código HTML:

Ver original<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
    <script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
    <link rel="stylesheet" href="http://www.proyectosbds.com/html/css/layout.css" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/estilos.css">
    <script src="js/funciones.js"></script>
    <script>
function valida_envio(){
    if (document.flogin.nombre.value=="") {
        alert("Campo nombre vacío");
        return false;
    }else if (document.flogin.apaterno.value=="") {
        alert("Campo apellido paterno vacío");
        return false;
    }else if (document.flogin.amaterno.value=="") {
        alert("Campo apellido materno vacío");
        return false;
    }else if (document.flogin.email.value=="") {
        alert("Campo email vacío");
        return false;
    }else if (document.flogin.telefono.value=="") {
        alert("Campo telefono vacío");
        return false;
    }else if (document.flogin.nacionalidad.value=="Nacionalidad") {
        alert("Selecciona una nacionalidad");
        return false;
    }else if (document.flogin.perfil.value=="perfi") {
        alert("Selecciona un perfil");
        return false;
    }else if (document.flogin.participacion.value=="participa") {
        alert("Selecciona un tipo de participacion");
        return false;
    }
    return true;
 
}   </script>
 
    <meta charset="UTF-8">
    <title>Registro de usuarios</title>
</head>
<body>
    <div class="container">
        <div class="jumbotron boxlogin">
            <h3 align="center">Formulario de registro</h3>
            <br>
             <form method="post" name="flogin" id="flogin">
                <div class="form-group">
                    <label class="sr-only" for="nombre">Nombre: </label>
                    <input class="form-control" type="text" name="nombre" id="nombre" placeholder="Nombre " required>
                    <label for="" class="sr-only">Apellido paterno: </label>
                    <input class="form-control" type="text" name="apaterno" id="apaterno" placeholder="Apellido paterno " required>
                    <label for="" class="sr-only">Apellido materno: </label>
                    <input class="form-control" type="text" name="amaterno" id="amaterno" placeholder="Apellido materno " required>
                    <label class="sr-only" for="email">Correo electr&oacute;nico: </label>
                    <input class="form-control" type="text" name="email" id="email" placeholder="[email protected] " required>
                    <label class="sr-only" for="telefono">Tel&eactue;fono</label>
                    <input class="form-control" type="text" name="telefono" id="telefono" placeholder="Teléfono" required>
                    <!--está pendiente trabajar con los códigos de área del apartado de telefonos -->
                    <select class="form-control" name="nacionalidad" id="nacionalidad">
                        <option selected="selected">Nacionalidad</option>
                        <option value="opcion1">Opción #1</option>
                        <option value="opcion2">Opción #2</option>
                        <option value="opcion3">Opción #3</option>
                        <option value="opcion4">Opción #4</option>
                        <option value="opcion5">Opción #5</option>
                    </select>
                    <select class="form-control" name="perfil" id="perfil" value="perfi">
                        <option selected="selected">Perfil</option>
                        <option value="profesionista">Profesionista</option>
                        <option value="estudiante">Estudiante</option>
                    </select>
                    <select class="form-control" name="participacion" id="participacion" 
                      onchange=" if(this.value =='pon_virt' | this.value=='pon_presc'){
                                 document.getElementById('ponencia').disabled = false 
                                 }else{
                                 document.getElementById('ponencia').disabled = true 
                                 }">
                        <option selected="selected" value="participa">Tipo de participaci&oacute;n</option>
                        <option value="pon_virt">Ponente virtual</option>
                        <option value="pon_presc">Ponente presencial</option>
                        <option value="cartel">Cartel</option>
                        <option value="asistente">Asistente</option>
                    </select>
                    <label for="" class="sr-only">Nombre de la ponencia: </label>
                    <input class="form-control" type="text" name="ponencia" id="ponencia" placeholder="Nombre de la ponencia: " disabled>
                </div>
                <br>
                <div align="center">
                <input type="button" class="btn btn-primary" id="btn_enviar" value="¡Enviar!"  onclick="return valida_envio(); enviar_datos_ajax();">
                </div>
                <div id="datos_enviados" align="center">
                    
                </div>
            </form>
        </div>
    </div>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>

Función de ajax:

Código Javascript:

Ver originalfunction enviar_datos_ajax(){
 
  var n=document.getElementById("nombre").value
  var ap=document.getElementById("apaterno").value
  var am=document.getElementById("amaterno").value
  var correo=document.getElementById("email").value
  var tel=document.getElementById("telefono").value
  var nac=document.getElementById("nacionalidad").value
  var per=document.getElementById("perfil").value
  var par=document.getElementById("participacion").value
  var pon=document.getElementById("ponencia").value
  var url="accion.php";
 
  $.ajax({
 
    type: "post",
    url: url,
    data: {nombre: n,
          apaterno: ap,
          amaterno: am,
          email: correo,
          telefono: tel,
          nacionalidad: nac,
          perfil: per,
          participacion: par,
          ponencia: pon},
    success:function(datos){
        $("#datos_enviados").html(datos);
    }
  });
};

Aquí recibo datos:

Código PHP:

  <?php  
 
require("conex.php"); 
function limpiar_tags($tags) 
{   
    $tags = strip_tags($tags);   
    $tags = stripslashes($tags);   
    $tags = htmlentities($tags);   
    return $tags;   
} 
 
echo $nombre=strtolower(limpiar_tags($_POST['nombre'])); 
echo $apaterno=strtolower(limpiar_tags($_POST['apaterno'])); 
echo $amaterno=strtolower(limpiar_tags($_POST['amaterno'])); 
echo $email=strtolower(limpiar_tags($_POST['email'])); 
echo $telefono=strtolower(limpiar_tags($_POST['telefono'])); 
echo $nacionalidad=strtolower(limpiar_tags($_POST['nacionalidad'])); 
echo $perfil=strtolower(limpiar_tags($_POST['perfil'])); 
echo $participacion=strtolower(limpiar_tags($_POST['participacion'])); 
echo $ponencia=strtolower(limpiar_tags($_POST['ponencia'])); 
date_default_timezone_set('America/Mexico_City'); 
$tiempo = date('Y-m-d H:i:s');  
$fecha=strftime("%Y-%m-%d", time()); 
 
 
 
try { 
        $sql="INSERT INTO registro(nombre,apaterno,amaterno,email,telefono,nacionalidad,perfil,participacion,ponencia,fecha_reg) 
              VALUES ('{$nombre}','{$apaterno}','{$amaterno}','{$email}','{$telefono}','{$nacionalidad}','{$perfil}','{$participacion}','{$ponencia}','{$tiempo}')"; 
              mysql_query($sql); 
              echo "Datos"; 
        } catch (Exception $e) { 
 
    echo "<h1>Error al insertar los datos</h1>".mysql_error($e); 
} 
?>

Algo, estoy haciendo mal pero no se que es ._.

Alexis88 · #2 (**permalink**) 12/02/2016, 23:18

Porque al retornar el valor entregado por la primera función que ejecutas, no le das chance a la segunda de hacerlo.

Una forma práctica que te puede servir es la siguiente:

Código Javascript:

Ver original$("#flogin").on("submit", function(event){
    event.preventDefault(); //Cancelas el envío
 
    if (valida_envio()){
        //Realizas el envío con el método $.ajax()
    }
});

El método .preventDefault() cancela la ejecución del evento submit, con lo cual no se realizará el envío y así podrás hacerlo mediante AJAX.

Un saludo