Problema de validacion de campos con Jquery en Tabs

andre___5025 · #1 (**permalink**) 06/07/2014, 14:59

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">
<title>Pestañas</title>
<head>
 
<script src="jquery.js"></script>
<script src="jquery.validate.js"></script>
<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 src="jquery-ui-1.9.2.custom.js"></script>
 
<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
        });    
    });
</script> 
 
 
<script>
    $(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" );
            }
        );
    });
    </script>
    
<style>
    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;
    }
    </style>
 
 
</head>
 
 
<body>
 
<FORM id="formulario" NAME="registrar_cab_hogar" METHOD="post">    
 
<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Datos1</a></li>
        <li><a href="#tabs-2">Datos2</a></li>
        <li><a href="#tabs-3">Datos3</a></li>
    </ul>
    <div id="tabs-1">
 
* N&uacute;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>
    </div>
    <div id="tabs-2">
* Apellidos: <input type=text class="required" name="apellidos" MAXLENGTH=45></input>
* Edad:<select class="required" name="edad">
    <option value="">Seleccione...</option> 
    <option value="18">18</option><option value="19">19</option><option value="20">20</option><option value="21">21</option>
    </select>
    </div>
    <div id="tabs-3">
    * Sexo:<input type="text" class="required" name="sexo" MAXLENGTH="45"></input>
 
    </div>
</div>
 
 
<input name="enviar" type="submit" class="button white" value="Guardar formulario">
</FORM>
 
 
[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]
 
</body>
</html>