Validar el formulario, y si esta todo bien enviar datos

alexpramer · #1 (**permalink**) 31/12/2011, 13:36

Hola, tengo un formulario de registro, (aunque lo que pido me puede servir para mas cosas) el cual quiero validar con jquery, y he encontrado tutoriales, pero quiero que cuando todos los datos esten bien, se vaya a el documento registrar.php, que es el que procesa todos los datos y los inserta en la base de datos.

No he encontrado tutoriales que hagan lo que quiero, si que validen el formulario, pero no la segunda parte, si sabeis de alguno me gustaria que me lo pasaseis, Gracias y Feliz Año a TODOS!!

caricatos · #2 (**permalink**) 31/12/2011, 14:44

Hola:

Para qué quieres usar librerías en algo tan sencillo. Tal vez no viste este turorial: El abc de los formularios.

Saludos

alexpramer · #3 (**permalink**) 31/12/2011, 18:11

Pero caricatos, yo no quiero que se valide cuando los usuarios envien el formulario, es decir, que yo no quiero usar onsubmit, quiero una validación en jquery, que cuando pongan un dato en un campo de texto y cliquen en otro o lo que sea, al lado les ponga: Campo necesario, o Usuario ya existe algo asi, que tambien use PHP para lo del usuario y eso... he buscado pero no encuentro...

dual3nigma · #4 (**permalink**) 31/12/2011, 18:54

Hola alexpramer, lo que comentas esta un poco extraño ya que como se enviara el formulario si al final ya no tienes campo que cliquear? Debes de pensar en usuabilidad, de cualquier forma esto te debería de ayudar a iniciar, es lo que comentas:

Código HTML:

Ver original<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    
    <style>
    .error {
        color:red;
    }
 
    .error input {
        border-color:red;
    }
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script>
 
    jQuery(function ($) {
        String.prototype.isEmpty = function (str) { return $.trim(this).length == 0 };
 
        $('form input').focus(function () {
            // para todos los inputs adicionales
            $(this).parent().prevAll().find('input').each(function () {
                var $self = $(this);
 
                // resetea el estado del input
                $self.parent().removeClass('error');
 
                if($self.is('.required') && 
                    /* haces tu validacion */
                    $self.val().isEmpty()) {
                    
                    // si hay errores
                    $self.parent().addClass('error');
                }
            });
        });
    });
    </script>
</head>
<body>
    <form>
        <p>Nombre de usuario:  <input type="text" class="required" /></p>
        <p>Correo electronico: <input type="email" class="required" /></p>
        <p>Otra cosa:  <input type="text" class="required" /></p>
    </form>
</body>
</html>

Saludos!

alexpramer · #5 (**permalink**) 01/01/2012, 05:40

Bueno, ya lo he solucionado, tendré que retocar el codigo porque hay cosas que no funcionan del todo bien pero bueno... Por si alguien mas quiere hacer lo mismo que yo, los tutoriales son estos:

http://www.youtube.com/watch?v=iWrr3NICnsA
http://www.youtube.com/watch?v=tTxCDZEeBCs
http://www.youtube.com/watch?v=xvWx4dMW280

Un saludo!!

alexpramer · #6 (**permalink**) 02/01/2012, 16:07

Todo solucionado,gracias!!