2

El formulario trabaja con php, mysql, bootstrap, jquery, jquery validate

El código que tengo es el siguiente

<script>
$.validator.addMethod(
        "regex",
        function(value, element, regexp) 
        {
            if (regexp.constructor != RegExp)
                regexp = new RegExp(regexp);
            else if (regexp.global)
                regexp.lastIndex = 0;
            return this.optional(element) || regexp.test(value);
        },
        "Please check your input."
);


    $( document ).ready( function (e) {
        $( "#altausuario" ).validate( {

            rules: {
                strNombreyApellido: {
                    required: true,
                    minlength: 10,
                    regex: /^[a-zA-Z\s]*$/,
                },
            strDocumento:
            {
                required: true,
                minlength: 8,
                number: true,
                regex: /^[0-9]{8}$/,
                "remote":
                {
                  url: 'includes/validar_documento.php',
                  type: "post",
                  data:
                  {
                      strDocumento: function()
                      {
                          return $('#altausuario :input[name="strDocumento"]').val();
                      }
                  }
                }
            },
                strDia: {
                    required: true,
                number: true,                       
                    minlength: 2,
                },
                strMes: {
                    required: true,
                    number: true,
                    minlength: 2,
                },
                strAnio: {
                    required: true,
                    number: true,
                    minlength: 4,
                },
                intSexo: {
                required: true
                },
                strDireccion: {
                    required: true,
                    minlength: 10
                },
                strTelefono: {
                    required: true,
                    minlength: 6,
                    regex: /^[0-9]{6}$/,
                },
                strEmail:
                {
                required: true,
                email: true,
                "remote":
                {
                  url: 'includes/validar_email.php',
                  type: "post",
                  data:
                  {
                      strEmail: function()
                      {
                          return $('#altausuario :input[name="strEmail"]').val();
                      }
                  }
                }
            },
                strPassword: {
                    required: true,
                    minlength: 8
                },
                strPassword2: {
                    required: true,
                    minlength: 8,
                    equalTo: "#strPassword"
                },
                intSocio: {
                required: true
                },                  
                acceptTerms: "required"
            },
            messages: {
                strNombreyApellido:{
                    required: "Ingrese su Nombre y Apellido",
                    minlength: "El Nombre y Apellido unnúmero menor a 10 digitos",
                    regex: "El Nombre y Apellido solo puede contener letras, y espacios en blanco entre palabras"
                },
                strDocumento: {
                    required: "Ingrese su N° de Documento",
                    minlength: "El Documento solo acepta 8 números",
                    remote: "El Número de Documento ya está en uso!",
                    regex: "El Documento solo acepta 8 números, sin puntos"
                },
                strDia: {
                    required: "Ingrese el día",
                    number: "Ingrese Números",
                    minlength: "Ej.: 09"
                },
                strMes: {
                    required: "Ingrese el mes",
                    number: "Ingrese Números",
                    minlength: "Ejemplo: 02"
                },
                strAnio: {
                    required: "Ingrese el año",
                    number: "Ingrese Números",
                    minlength: "El año contiene 4 dígitos"
                },
                intSexo: {
                    required: "Seleccione una opción",
                },
                strDireccion: {
                    required: "Ingrese su direccion",
                    minlength: "La direccion no puede contener un número menor de 10 caracteres"
                },
                strTelefono: {
                    required: "Ingrese su número de teléfono",
                    minlength: "El Telèfono no puede contener un número menor de 6 dígitos",
                    regex: "El Documento solo acepta 6 números"
                },
                strEmail: {
                    required:"Ingrese su Email",
                    email:"Por favor ingrese un email válido",
                    remote: "El Email ya está en uso!"
                },
                strPassword: {
                    required: "Ingrese su requerido",
                    minlength: "El Password debe contener un mínimo de 8 caracteres"

                },
                strPassword2: {
                    required: "Reingrese su Password",
                    minlength: "El Password debe contener un mínimo de 8 caracteres",
                    equalTo: "El Password y su confirmaci&oacute;n no coinciden"
                },
                intSocio: {
                    required: "Seleccione una opción",
                },                  
                acceptTerms: "Acepte los T&eacute;rminos y Condiciones"
                },

            errorElement: "em",
            errorPlacement: function ( error, element ) {
                // Add the `help-block` class to the error element
                error.addClass( "help-block" );

                // Add `has-feedback` class to the parent div.form-group
                // in order to add icons to inputs
                element.parents( ".col-sm-5" ).addClass( "has-feedback" );

                if ( element.prop( "type" ) === "checkbox" ) {
                    error.insertAfter( element.parent( "label" ) );
                } else {
                    error.insertAfter( element );
                }

                // Add the span element, if doesn't exists, and apply the icon classes to it.
                if ( !element.next( "span" )[ 0 ] ) {
                    $( "<span class='glyphicon glyphicon-remove form-control-feedback'></span>" ).insertAfter( element );
                }
            },
            success: function ( label, element ) {
                // Add the span element, if doesn't exists, and apply the icon classes to it.
                if ( !$( element ).next( "span" )[ 0 ] ) {
                    $( "<span class='glyphicon glyphicon-ok form-control-feedback'></span>" ).insertAfter( $( element ) );
                }
            },

            highlight: function ( element, errorClass, validClass ) {
                $( element ).parents( ".col-sm-5" ).addClass( "has-error" ).removeClass( "has-success" );
                $( element ).next( "span" ).addClass( "glyphicon-remove" ).removeClass( "glyphicon-ok" );
            },
            unhighlight: function ( element, errorClass, validClass ) {
                $( element ).parents( ".col-sm-5" ).addClass( "has-success" ).removeClass( "has-error" );
                $( element ).next( "span" ).addClass( "glyphicon-ok" ).removeClass( "glyphicon-remove" );

        },

         });

/*$('#enviar').on('click', function(e) {
$('#altausuario').submit();
  $('#altausuario').html("<div id='message'></div>");
  $('#message').html("<h2>El registro se efectuo correctamente!</h2>")
  .append("<p>Le hemos enviado un email para confirmar su registro.</p>")
  .hide()
  .fadeIn(1500, function() {
    $('#message').append("Muchas Gracias");
  });
});*/

});
</script> 

La validación funciona hasta que descomento la última parte, sino me aparece el mensaje pero no se guarda el registo, y si cambio enviar on click por enviar on submit, se guarda el registro y no me aparece el mesnaje. Espero alguien de Uds me pueda orientar, y perdón este es mi primer post, desde ya muchas gracias

Aquí va la página completa

   <?php require_once('Connections/salida.php'); ?>
  <?php
   if (!function_exists("GetSQLValueString")) {
   function GetSQLValueString($theValue, $theType, $theDefinedValue = "",   $theNotDefinedValue = "") 
{
  if (PHP_VERSION < 6) {
$theValue = get_magic_quotes_gpc() ? stripslashes($theValue) : $theValue;
  }

  global $salida;
  $theValue = function_exists("mysqli_real_escape_string") ?    mysqli_real_escape_string($salida, $theValue) :    mysqli_escape_string($salida,$theValue);

  switch ($theType) {
   case "text":
     $theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
    break;    
   case "long":
   case "int":
  $theValue = ($theValue != "") ? intval($theValue) : "NULL";
  break;
case "double":
  $theValue = ($theValue != "") ? doubleval($theValue) : "NULL";
  break;
case "date":
  $theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
  break;
case "defined":
  $theValue = ($theValue != "") ? $theDefinedValue : $theNotDefinedValue;
  break;
 }
    return $theValue;
   }
   }    
   if ((isset($_POST["MM_insert"])) && ($_POST["MM_insert"] == "altausuario"))    { 

  $_POST['intActivo' ] = 0 ;
   $strActivacion=md5($_POST['strEmail'].time()); // encriptar email+timestamp
 $_POST['fchNacimiento'] = $_POST['strAnio']."-".$_POST['strMes']."-".$_POST['strDia'];
$_POST['strActivacion'] = $strActivacion;
 $insertSQL = sprintf("INSERT INTO tblclientes (strNombreyApellido, strDocumento, fchNacimiento, intSexo, strDireccion, strTelefono, strEmail, strPassword, intSocio, intActivo, strActivacion, fchAlta) VALUES (%s, %s, %s, %s, %s, %s, %s, %s, %s, %s, %s, NOW())",
                   GetSQLValueString($_POST['strNombreyApellido'], "text"),
                   GetSQLValueString($_POST['strDocumento'], "text"),
                   GetSQLValueString($_POST['fchNacimiento'], "text"),
                   GetSQLValueString($_POST['intSexo'], "int"),
                   GetSQLValueString($_POST['strDireccion'], "text"),
                   GetSQLValueString($_POST['strTelefono'], "text"),
                   GetSQLValueString($_POST['strEmail'], "text"),
                   GetSQLValueString(md5($_POST['strPassword']), "text"),
                   GetSQLValueString($_POST['intSocio'], "int"),
                   GetSQLValueString($_POST['intActivo'], "int"),
                   GetSQLValueString($_POST['strActivacion'], "text"));


 $Result1 = mysqli_query($salida, $insertSQL) or die(mysqli_error($salida));



include 'smtp/Send_Mail.php';
 $base_url = "http://localhost/elfogon/";
 $to=$_POST['strEmail'];
  $subject="Verificación de Correo Electrónico - El Fogón Brasería";
  $body='Hola, <br/> <br/> Si Ud. se ha registrado en El Fog&oacute;n , haga clic en el siguiente enlace para activar su cuenta. <br/> <br/>Si no se ha registrado elimine este correo. Muchas gracias.<br/> <br/><a href="'.$base_url.'activar-cuenta/'.$strActivacion.'">'.$base_url.'activar-cuenta/'.$strActivacion.'</a>';
Send_Mail($to,$subject,$body);
 }

 ?>
 <!DOCTYPE html>
 <html lang="es">
 <!-- InstanceBegin template="/Templates/index.dwt.php" codeOutsideHTMLIsLocked="false" -->
   <head>
  <meta charset="utf-8">
 <meta name="viewport"    content="width=device-width, initial-scale=1.0">
 <meta name="description" content="">
 <meta name="author"      content="OCS Software">
 <!-- InstanceBeginEditable name="doctitle" -->
<title>Registro de Usuarios</title>
<?php include("includes/referenciabase.php"); ?>
 <!-- InstanceEndEditable -->
 <link rel="shortcut icon" href="favicon.ico">
 <?php include("includes/head.php"); ?>
  <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!--[if lt IE 9]>
<script src="assets/js/html5shiv.js"></script>
<script src="assets/js/respond.min.js"></script>
   <![endif]-->
    <!-- InstanceBeginEditable name="head" -->
    <!-- InstanceEndEditable -->
   <!-- InstanceParam name="OptionalRegion1" type="boolean" value="true" -->
   </head>
   <body>
   <!-- Fixed navbar -->
   <?php include("includes/navbar.php"); ?>
  <!-- /.navbar --> 
  <!-- Header -->
  <header id="head">
 <div class="container">
  <div class="row"> <img class="logo" src="imagenes/logo.gif"> </div>
</div>
  </header>
    <!-- /Header --> 

   <!-- container -->
  <div class="container">
  <ol class="breadcrumb">
<!-- InstanceBeginEditable name="EditRegion4" -->
<li><a href="index.php">Inicio</a></li>
<li class="active">Registro</li>
  <!-- InstanceEndEditable -->
</ol>
 <div class="row">
  <div class="col-sm-3 col-md-2">
  <header class="page-header">
    <h1 class="page-title">&nbsp;</h1>
  </header>
  <p class="lead text-center">Men&uacute;</p>
  <div class="navbar">
    <?php include("includes/menu.php"); ?>
  </div>
</div>
<!-- Article main content --><!-- InstanceBeginEditable name="EditRegion3" -->
<article class="col-sm-6 col-md-8 maincontent">
  <header class="page-header">
    <h1 class="page-title">Registro</h1>
    </header>
    <form action="registro.php" name="altausuario" class="form-horizontal" id="altausuario" method="post">
     <fieldset>
      <div class="form-group">
        <label class="col-lg-3 control-label">Nombre y Apellido:</label>
        <div class="col-lg-5 h4">
          <div class="input-group">
            <div class="input-group-addon warning"> <i class="glyphicon glyphicon-user"> </i> </div>
            <input type="text" class="form-control" id="strNombreyApellido" name="strNombreyApellido"  placeholder="Nombre y Apellido">
          </div>
        </div>
      </div>
      <div class="form-group">
        <label class="col-lg-3 control-label">Nº de Documento:</label>
        <div class="col-lg-5 h4">
                      <div class="input-group">
            <div class="input-group-addon warning"> <i class="fa fa-sticky-note-o"> </i> </div>
          <input type="text" class="form-control" name="strDocumento" id="strDocumento" placeholder="Nº de Documento" />
          <div id="msgDocumento"></div>
          </div>
        </div>
      </div>
      <div class="form-inline">
        <div class="form-group">
          <label class="col-lg-3 control-label">Fecha de Nacimiento:</label>
          <div class="col-md-2 col-lg-2 h4">
            <input type="text" class="form-control" id="strDia" name="strDia" placeholder="Dia" maxlength="2">
          </div>
          <div class="col-md-2 col-lg-2 h4">
            <input type="text" class="form-control" id="strMes" name="strMes" placeholder="Mes" maxlength="2">
          </div>
          <div class="col-md-2 col-lg-1 h4">
            <input type="text" class="form-control" id="strAnio" name="strAnio" placeholder="Año" maxlength="4">
          </div>
        </div>
      </div>
      <div class="form-group">
        <label class="col-lg-3 control-label">Sexo:</label>
        <div class="col-lg-5 h4">
                  <div class="input-group">
       <div class="input-group-addon warning"> <i class="fa fa-male" aria-hidden="true"></i> </div>
          <select id="intSexo" name="intSexo" class="form-control">
            <option value="">Seleccione una opción</option>
            <option value="0">Masculino</option>
            <option value="1">Femenino</option>
          </select>
                     <div class="input-group-addon warning"> <i class="fa fa-female" aria-hidden="true"></i> </div>
        </div>
        </div>
      </div>
      <div class="form-group">
        <label class="col-lg-3 control-label">Direcci&oacute;n:</label>
        <div class="col-lg-5 h4">
          <div class="input-group">
            <div class="input-group-addon warning"> <i class="glyphicon glyphicon-home"> </i> </div>
            <input type="text" class="form-control" id="strDireccion" name="strDireccion"  placeholder="Calle Nº 1111">
          </div>
        </div>
      </div>
      <div class="form-group">
        <label class="col-lg-3 control-label">Teléfono:</label>
        <div class="col-lg-5 h4">
          <div class="input-group">
            <div class="input-group-addon warning"> <i class="glyphicon glyphicon-earphone"> </i> </div>
            <input type="text" class="form-control" id="strTelefono" name="strTelefono"  placeholder="Teléfono o Celular">
          </div>
        </div>
      </div>
    </fieldset>
    <fieldset>
      <div class="form-group">
        <label class="col-lg-3 control-label">Email:</label>
        <div class="col-lg-5 h4">
          <div class="input-group">
            <div class="input-group-addon warning"> @ </i> </div>
            <input type="text" class="form-control" id="strEmail" name="strEmail"  placeholder="Email">
          </div>
        </div>
      </div>
    </fieldset>
    <fieldset>
      <div class="form-group">
        <label class="col-lg-3 control-label">Password:</label>
        <div class="col-lg-5 h4">
          <div class="input-group">
            <div class="input-group-addon warning"> <i class="fa fa-key" aria-hidden="true"></i> </div>
            <input type="password" class="form-control" id="strPassword" name="strPassword"  placeholder="Contraseña">
          </div>
        </div>
      </div>
      <div class="form-group">
        <label class="col-lg-3 control-label">Repetir Password:</label>
        <div class="col-lg-5 h4">
          <div class="input-group">
            <div class="input-group-addon warning"> <i class="fa fa-key" aria-hidden="true"></i> </div>
            <input type="password" class="form-control" id="strPassword2" name="strPassword2"  placeholder="Repetir Contraseña">
          </div>
        </div>
      </div>
    </fieldset>
    <div class="form-group">
      <label class="col-lg-3 control-label">Socio:</label>
      <div class="col-lg-5 h4">
      <div class="input-group">
       <div class="input-group-addon warning"> <i class="fa fa-group" aria-hidden="true"></i> </div>
        <select id="intSocio" name="intSocio" class="form-control">
          <option value="">Seleccione una opción</option>
          <option value="0">NO</option>
          <option value="1">SI</option>
        </select>
      </div>
      </div>
    </div>
    <div class="form-group">
      <div class="col-lg-9 col-lg-offset-3">
        <div class=" h4">
          <label>
            <input type="checkbox" name="acceptTerms"  id="acceptTerms" value="acceptTerms" />
          </label>
          T&eacute;rminos y Condiciones </div>
      </div>
    </div>
    <div class="form-group">
      <div class="col-lg-9 col-lg-offset-3 h4">
        <button class="btn btn-success" type="submit" id="enviar"><span class="glyphicon glyphicon-thumbs-up"></span>  Registrarse</button>
        <button class="btn btn-danger" type="reset" id="reset"><span class="glyphicon glyphicon-remove-sign"></span>  Borrar Información</button>
      </div>
    </div>
    <input type="hidden" class="form-control" id="MM_insert" name="MM_insert" value="altausuario">
  </form>


   </article>
   <script>
  $.validator.addMethod(
        "regex",
        function(value, element, regexp) 
        {
            if (regexp.constructor != RegExp)
                regexp = new RegExp(regexp);
            else if (regexp.global)
                regexp.lastIndex = 0;
            return this.optional(element) || regexp.test(value);
        },
        "Please check your input."
);


    $( document ).ready( function (e) {
if($('#registrado').val()){
    $('#altausuario').html("<div id='message'></div>");
    $('#message').html("<h2>El registro se efectuo correctamente!</h2>")
        .append("<p>Le hemos enviado un email para confirmar su registro.       </p>")
       .hide()
       .fadeIn(1500, function() {
            $('#message').append("Muchas Gracias");
       });
 }
        $( "#altausuario" ).validate({


            rules: {
                strNombreyApellido: {
                    required: true,
                    minlength: 10,
                    regex: /^[a-zA-Z\s]*$/,
                },
            strDocumento:
            {
                required: true,
                minlength: 8,
                number: true,
                regex: /^[0-9]{8}$/,
                "remote":
                {
                  url: 'includes/validar_documento.php',
                  type: "post",
                  data:
                  {
                      strDocumento: function()
                      {
                          return $('#altausuario :input[name="strDocumento"]').val();
                      }
                  }
                }
            },
                strDia: {
                    required: true,
                number: true,                       
                    minlength: 2,
                },
                strMes: {
                    required: true,
                    number: true,
                    minlength: 2,
                },
                strAnio: {
                    required: true,
                    number: true,
                    minlength: 4,
                },
                intSexo: {
                required: true
                },
                strDireccion: {
                    required: true,
                    minlength: 10
                },
                strTelefono: {
                    required: true,
                    minlength: 6,
                    regex: /^[0-9]{6}$/,
                },
                strEmail:
            {
                required: true,
                email: true,
                "remote":
                {
                  url: 'includes/validar_email.php',
                  type: "post",
                  data:
                  {
                      strEmail: function()
                      {
                          return $('#altausuario :input[name="strEmail"]').val();
                      }
                  }
                }
            },

                strPassword: {
                    required: true,
                    minlength: 8
                },
                strPassword2: {
                    required: true,
                    minlength: 8,
                    equalTo: "#strPassword"
                },
                intSocio: {
                required: true
                },                  
                acceptTerms: "required"
            },
            messages: {
                strNombreyApellido:{
                    required: "Ingrese su Nombre y Apellido",
                    minlength: "El Nombre y Apellido unnúmero menor a 10 digitos",
                    regex: "El Nombre y Apellido solo puede contener letras, y espacios en blanco entre palabras"
                },
                strDocumento: {
                    required: "Ingrese su N° de Documento",
                    minlength: "El Documento solo acepta 8 números",
                    remote: "El Número de Documento ya está en uso!",
                    regex: "El Documento solo acepta 8 números, sin puntos"
                },
                strDia: {
                    required: "Ingrese el día",
                    number: "Ingrese Números",
                    minlength: "Ej.: 09"
                },
                strMes: {
                    required: "Ingrese el mes",
                    number: "Ingrese Números",
                    minlength: "Ejemplo: 02"
                },
                strAnio: {
                    required: "Ingrese el año",
                    number: "Ingrese Números",
                    minlength: "El año contiene 4 dígitos"
                },
                intSexo: {
                    required: "Seleccione una opción",
                },
                strDireccion: {
                    required: "Ingrese su direccion",
                    minlength: "La direccion no puede contener un número menor de 10 caracteres"
                },
                strTelefono: {
                    required: "Ingrese su número de teléfono",
                    minlength: "El Telèfono no puede contener un número menor de 6 dígitos",
                    regex: "El Teléfono solo acepta 6 dígitos"
                },
                strEmail: {
                    required:"Ingrese su Email",
                    email:"Por favor ingrese un email válido",
                    remote: "El Email ya está en uso!"
                },
                strPassword: {
                    required: "Ingrese su requerido",
                    minlength: "El Password debe contener un mínimo de 8 caracteres"

                },
                strPassword2: {
                    required: "Reingrese su Password",
                    minlength: "El Password debe contener un mínimo de 8 caracteres",
                    equalTo: "El Password y su confirmaci&oacute;n no coinciden"
                },
                intSocio: {
                    required: "Seleccione una opción",
                },                  
                acceptTerms: "Acepte los T&eacute;rminos y Condiciones"
                },

   errorClass: "label label-danger",
    highlight: function (element, errorClass, validClass) {
        return false;
        $(element).addClass('foo').removeClass('bar');
    },
    unhighlight: function (element, errorClass, validClass) {
        return false;
        $(element).addClass('bar').removeClass('foo');
    },
  });   



 $('#enviar').on('click', function(e) {
// $('#altausuario').submit();
  $('#altausuario').html("<div id='message'></div>");
  $('#message').html("<h2>El registro se efectuo correctamente!</h2>")
  .append("<p>Le hemos enviado un email para confirmar su registro.</p>")
  .hide()
  .fadeIn(1500, function() {
    $('#message').append("Muchas Gracias");
  });
 });

   /*$(":text").each(function(){    
        $($(this)).val('');
    });


        function limpiarformulario(formulario){
            var formulario = $("#altausuario");

            $(formulario).find('input').each(function() {
                switch(this.type) {
                    case 'password':            
                    case 'text':            
                    $(this).val('');
                        break;
                    case 'checkbox':
                    case 'radio':
                        this.checked = false;
                    }               
            }); 

            $(formulario).find('select').each(function() {                  
                $("#"+this.id + " option[value=0]").attr("selected",true);

            });                 
        }*/


} );



 /*$('#enviar').on('before-submit', function(e) {
 $('#altausuario').submit();
  $('#altausuario').html("<div id='message'></div>");
  $('#message').html("<h2>El registro se efectuo correctamente!</h2>")
  .append("<p>Le hemos enviado un email para confirmar su registro.</p>")
  .hide()
  .fadeIn(1500, function() {
    $('#message').append("Muchas Gracias");
  });
 });    */  

</script> 

<!-- InstanceEndEditable --><!-- /Article --> 

<!-- Sidebar -->
<aside class="col-sm-3 col-md-2 sidebar-right">
  <header class="page-header">
    <h1 class="page-title">&nbsp;</h1>
  </header>
  <div class="lead text-center">
    <p>Alquiler del Sal&oacute;n</p>
  </div>
  <div>
    <?php include("includes/anuncios.php"); ?>
  </div>
   </aside>
   <!-- /Sidebar --> 

 </div>
  </div>
<!-- /container -->

 <footer id="footer" class="top-space">
 <?php include("includes/prepie.php"); ?>
 </footer>
  <?php include("includes/footer.php"); ?>
   </body>
   <!-- InstanceEnd -->
  </html>
6
  • Por lo que he podido entender, según comentarios en la respuesta, es que cuando hagas click en #enviar quieres mandar los datos del formulario al PHP, guardarlos, y recargar la página con el mensaje, ¿es así? Porque si es así, puedes realizar esa tarea con $.ajax(), el cual no necesitas recargar la página
    – Zander
    Commented el 4 nov. 2016 a las 12:56
  • El tema es que no se como hacerlo, y tampoco como colocar el código completo de la página aquí
    – konchikuzo
    Commented el 4 nov. 2016 a las 13:12
  • Entiendo, y por eso estamos aquí para poder ayudar, pero lo que quieres conseguir es eso que mencioné, ¿verdad?
    – Zander
    Commented el 4 nov. 2016 a las 13:13
  • Si es así, esa es la idea, ingresas a la pagina registro.php, cargas los datos, se validan, se oculta el formulario y sale el mensaje
    – konchikuzo
    Commented el 4 nov. 2016 a las 13:58
  • Ok, teniendo esto en mente, cuando validas el formulario, antes de ir a la página PHP para ingresar los datos debes prevenir que se cambie la página e.preventDefault() si es un submit. Y aquí es donde entra el $.ajax() api.jquery.com/jquery.ajax Envias los datos a la url (que será tu PHP) y este debe devolverte un valor (por ejemplo true o false si se hizo correctamente) y en success: function(data){} introducir ahí el popup. Revisa la documentación, tal vez esto te ayude
    – Zander
    Commented el 4 nov. 2016 a las 14:02

1 respuesta 1

1

El problema está en que al hacer un submit del formulario este recargará la página, efectivamente si que pasará por el validador antes, pero al recargar los mensajes que pintas ya no estarán presentes. Una solución podría ser que metieras el código que hay después de $('#altausuario').submit(); en $(document).ready(); de la página a la que redirige el formulario, si es la misma deberás meterle alguna condición que compruebe que lo has hecho.

Bueno, como solución se me ocurre lo siguiente, en tu código php puedes colocar una variable la que llamaríamos registrado y colocarla en tu formulario html tal que así:

(No se PHP con lo que no tengo mucha idea como se enlazan las variables de php con los elementos de un formulario, pero imagino que será de la misma forma que enlazas los que ya tienes)

Inicialmente, cuando entres por primera vez a la página de registro, registrado será false, una vez que el código php que usas para guardar el registro en tu BBDD (o donde quiera que lo estés guardando) deberás setear esta variable a true y con eso podrás aplicar el siguiente código:

$( document ).ready( function (e) {
    if($('#registrado').val()){
        //$('#altausuario').html("<div id='message'></div>");
        $('#altausuario').hide();
        $('#message').html("<h2>El registro se efectuo correctamente!</h2>")
            .append("<p>Le hemos enviado un email para confirmar su registro.       </p>")
           .hide()
           .fadeIn(1500, function() {
                $('#message').append("Muchas Gracias");
           });
     }else{
         $('#message').hide();
     }
     $( "#altausuario" ).validate( {
        //Tu codigo de validacion
});
11
  • Te agradezco la respuesta, probé, pero me da error y no tengo mucha idea, soy muy novato en esto, se agradece si me podés ayudar un poco
    – konchikuzo
    Commented el 4 nov. 2016 a las 11:42
  • @konchikuzo Actualmente, ¿a donde redirige el formulario cuando hace submit?
    – Raider
    Commented el 4 nov. 2016 a las 11:47
  • El formulario es uno y se llama registro.php, cuando envía los datos vuelve a cargar el mismo formulario, y la idea es que cargue los datos, oculte el formulario y aparezca el mensaje
    – konchikuzo
    Commented el 4 nov. 2016 a las 11:50
  • @konchikuzo y actualmente, con el código comentado ¿consigues que haga eso?, o sea ocultar el formulario y queden los datos guardados (sin el mensaje de confirmación, ya que si tienes eso (que sería la parte de php me imagino) podemos partir de ahí.
    – Raider
    Commented el 4 nov. 2016 a las 11:59
  • Si en el apartado comentado, en la primera linea coloco on.clic me carga los datos, el comentario aparece unos instantes y vuelve a aparecer el formulario. Sin la segunda línea al hacer clic en el boton aparece el comentario, sin precisar cargar los datos
    – konchikuzo
    Commented el 4 nov. 2016 a las 12:20

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.