validar varios campos con jquery.validate

Freakme · #1 (**permalink**) 09/12/2010, 11:42

Buenas tardes, estoy intentando validar varios campos de un formulario con jquery.validate y no consigo que me valide más que el primero.

Código:

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.validate.js"></script>
<script>
  $(document).ready(function(){
    $("#registrar_nuevo_cliente").validate();
  });
  </script>
</head>

<body>
<form name='registrar_nuevo_cliente' id='registrar_nuevo_cliente' action='acciones.php' method='post'>    

<legend>Datos Cliente</legend>

<p><label for='nombre'>Nombre</label> <input type='text' id='nombre' class='required' minlength='6' /></p>

<p><label for='apellidos'>Apellidos</label> <input type='text' id='apellidos' /></p>

<p><label for='nif'>NIF</label> <input type='text' id='nif' class='required' minlength='9' /></p>

<p><label for='telefono'>Tel&eacute;fono</label> <input type='text' id='telefono' class='required' /></p>

<p><label for='email'>e-mail</label> <input type='text' id='email' class='required email' /> Ser&aacute; utilizado como usuario de acceso.</p>

<input type='hidden' name='accion' value='registrar_nuevo_cliente' />

<p class='enviar'><input type='submit' class='submit' value='Registrar' /></p>

</form>

</body>
     
</html>

He seguido los tutoriales, pero nada... espero que alguien por aquí pueda echarme un cable. Gracias

Un saludo :D

alfcm · #2 (**permalink**) 11/12/2010, 10:49

Haber te pongo un ejemplo

Código Javascript:

Ver original$("#frmproducto_edit").validate(
            {
            rules:{descripcion:'required',precio:'required',stock:'required'},
            messages:{descripcion:{required:'Campo Obligatorio'},
                      precio:{required:'Campo Obligatorio'},
                      stock:{required:'Campo Obligatorio'}
                     },
            success: "valid",
            error:"error" 
            }
        );

y un archivo css

Código CSS:

Ver originallabel.error {
        background: url('http://dev.jquery.com/view/trunk/plugins/validate/demo/images/unchecked.gif') no-repeat;
        padding-left: 16px;
        margin-left: .3em;
    }
    label.valid {
        background: url('http://dev.jquery.com/view/trunk/plugins/validate/demo/images/checked.gif') no-repeat;
        display: float;
        width: 16px;
        height: 16px;
    }

Saludos

alfcm · #3 (**permalink**) 11/12/2010, 10:51

me olvidaba el HTML

Código HTML:

Ver original<form name="frmproducto" id="frmproducto">
        <table>
            <tr><td>Descripcion</td>
                <td><input type="text" name="descripcion" id="descripcion" /></td></tr>
            <tr><td>Precio</td>
                <td><input type="text" name="precio" id="precio" /></td></tr>
            <tr><td>Stock</td>
                <td><input type="text" name="stock" id="stock" /></td></tr>
            <tr><td><input type="submit" name="grabar" id="grabar" value="GRABAR" /></td>
            </tr>
        </table>
        </form>

Freakme · #4 (**permalink**) 13/12/2010, 11:57

¡Buenas tardes, alfcm!
Primero quiero darte las gracias por responder, pero tengo que decirte que he hecho una prueba con el código que me has pasado y no me funciona.

Código:

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.validate.js"></script>

<script type="text/javascript">
$("#frmproducto_edit").validate(
            {
            rules:{descripcion:'required',precio:'required',stock:'required'},
            messages:{descripcion:{required:'Campo Obligatorio'},
                      precio:{required:'Campo Obligatorio'},
                      stock:{required:'Campo Obligatorio'}
                     },
            success: "valid",
            error:"error" 
            }
        );
</script>
<style>
label.error {
        background: url('http://dev.jquery.com/view/trunk/plugins/validate/demo/images/unchecked.gif') no-repeat;
        padding-left: 16px;
        margin-left: .3em;
    }
    label.valid {
        background: url('http://dev.jquery.com/view/trunk/plugins/validate/demo/images/checked.gif') no-repeat;
        display: float;
        width: 16px;
        height: 16px;
    }
</style>
</head>
<body>
<form name="frmproducto" id="frmproducto">
        <table>
            <tr><td>Descripcion</td>
                <td><input type="text" name="descripcion" id="descripcion" /></td></tr>
            <tr><td>Precio</td>
                <td><input type="text" name="precio" id="precio" /></td></tr>
            <tr><td>Stock</td>
                <td><input type="text" name="stock" id="stock" /></td></tr>
            <tr><td><input type="submit" name="grabar" id="grabar" value="GRABAR" /></td>
            </tr>
        </table>
        </form>
      </body>  
        </html>

He hecho este archivo y no funciona, envía el formulario sin más, aún con los campos vacíos...

Gracias, un saludo :D

alfcm · #5 (**permalink**) 15/12/2010, 18:48

creo que copie mal, corrige esto porfavor

Código Javascript:

Ver original$("#frmproducto_edit").validate(
 
por esto
 
$("#frmproducto").validate(

y me dices como te fue
Saludos