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ón no coinciden"
},
intSocio: {
required: "Seleccione una opción",
},
acceptTerms: "Acepte los Té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ó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"> </h1>
</header>
<p class="lead text-center">Menú</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ó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é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ón no coinciden"
},
intSocio: {
required: "Seleccione una opción",
},
acceptTerms: "Acepte los Té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"> </h1>
</header>
<div class="lead text-center">
<p>Alquiler del Saló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>
#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áginae.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 ensuccess: function(data){}
introducir ahí el popup. Revisa la documentación, tal vez esto te ayude