Buenas tardes, resulta que tengo un formulario dividido en tres partes por medio de pestañas (Tabs) con Jquery. En cada pestaña hay diferentes campos los cuales también están validados con Jquery, el problema es que cuando oprimo el botón de "enviar" solo me valida los campos de la pestaña que se esta visualizando en ese momento, es decir por ejemplo estoy visualizando la pestaña 'Dato2', lleno los campos de esa pestaña y le doy 'enviar' lo que hace es guardarme los datos pero no me valida que los campos de las pestañas 'Dato1' y 'Dato3' están vacíos.
Alguien sabe como solucionar este problema, de verdad llevo días haciendo muchas pruebas quitando, agregando, sustituyendo pero nada. Si alguien sabe le agradecería mucho.
Código HTML:
Ver original<?php
include 'conex.php';
?>
<!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" dir="ltr" lang="en-US" xml:lang="en">
<LINK href='estilo_color.css' type=text/css rel=stylesheet> <LINK href='jquery-ui-1.9.2.custom.css' type=text/css rel=stylesheet>
<script type="text/javascript"> $(function(){
$('#formulario').validate({
errorClass: "my-error-class",
validClass: "my-valid-class",
rules :{
numdoc : {
required :true,
number : true //para validar campo solo numeros
},
nombres : {
required :true,
},
apellidos : {
required :true,
},
edad : {
required :true,
},
sexo : {
required :true,
}
}//cierra rules
});
});
$(function() {
$( "#accordion" ).accordion();
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
$( "#autocomplete" ).autocomplete({
source: availableTags
});
$( "#button" ).button();
$( "#radioset" ).buttonset();
$( "#tabs" ).tabs();
$( "#dialog" ).dialog({
autoOpen: false,
width: 400,
buttons: [
{
text: "Ok",
click: function() {
$( this ).dialog( "close" );
}
},
{
text: "Cancel",
click: function() {
$( this ).dialog( "close" );
}
}
]
});
// Link to open the dialog
$( "#dialog-link" ).click(function( event ) {
$( "#dialog" ).dialog( "open" );
event.preventDefault();
});
$( "#datepicker" ).datepicker({
inline: true
});
$( "#slider" ).slider({
range: true,
values: [ 17, 67 ]
});
$( "#progressbar" ).progressbar({
value: 20
});
// Hover states on the static widgets
$( "#dialog-link, #icons li" ).hover(
function() {
$( this ).addClass( "ui-state-hover" );
},
function() {
$( this ).removeClass( "ui-state-hover" );
}
);
});
body{
font: 62.5% "Trebuchet MS", sans-serif;
margin: 50px;
}
.demoHeaders {
margin-top: 2em;
}
#dialog-link {
padding: .4em 1em .4em 20px;
text-decoration: none;
position: relative;
}
#dialog-link span.ui-icon {
margin: 0 5px 0 0;
position: absolute;
left: .2em;
top: 50%;
margin-top: -8px;
}
#icons {
margin: 0;
padding: 0;
}
#icons li {
margin: 2px;
position: relative;
padding: 4px 0;
cursor: pointer;
float: left;
list-style: none;
}
#icons span.ui-icon {
float: left;
margin: 0 4px;
}
.fakewindowcontain .ui-widget-overlay {
position: absolute;
}
<FORM id="formulario" NAME="registrar_cab_hogar" METHOD="post">
<li><a href="#tabs-1">Datos1
</a></li> <li><a href="#tabs-2">Datos2
</a></li> <li><a href="#tabs-3">Datos3
</a></li>
* N
úmero de documento:
<input class="required" type=text name="numdoc" id="numdoc" onKeyPress="cargando(this)" onBlur="comprobarU(this)" MAXLENGTH=20 onKeypress="if (event.keyCode < 45 || event.keyCode > 57) event.returnValue = false;">
</input> * Nombres:
<input type="text" class="required" name="nombres" MAXLENGTH="45"></input>* Apellidos:
<input type=text class="required" name="apellidos" MAXLENGTH=45></input>* Edad:
<select class="required" name="edad"> * Sexo:
<input type="text" class="required" name="sexo" MAXLENGTH="45"></input>
<input name="enviar" type="submit" class="button white" value="Guardar formulario">
[PHP]<?php
if ($_POST["enviar"]){
$sql="insert into usuarios (numdoc,nombres,apellidos,edad,sexo)values
('".$_POST["numdoc"]."','".$_POST["nombres"]."','".$_POST["apellidos"]."','".$_POST["edad"]."','".$_POST["sexo"]."')";
if ($result=mysql_query ($sql,$link)){echo '<script language= "Javascript"> alert("Registro guardado correctamente");
</script>';}
else{echo 'error:'.mysql_error($link);}
}
?>
[/PHP]