[SOLUCIONADO] problema jquery validate

gonzalss · #1 (**permalink**) 22/09/2014, 09:43

LLevo unos dias atascado con la funcion validate de la clase JQUERY en mi pagina.

Me da la sensación que haber algún problema con el resto de clases que he puesto ( slider) por que no llega a entrar en el
en el script del validate para validar los datos del formulario. ¿ Me podrías ayudar por favor ?
¿ Por que no valida el formulario ? ¿ Porque me da un error si lo miro con el inspector de elementos ?

jvier · #2 (**permalink**) 22/09/2014, 09:57

No estoy muy seguro.. pero parece que estas importando dos veces la librería de jquery, y posiblemente tienes un conflicto de versiones... prueba eliminando la que sobra

jvier · #3 (**permalink**) 22/09/2014, 10:04

De hecho el jquery-1.11.1 no parece ser un archivo javascript, si solucionas eso posiblemente su pagina funcione correctamente

diurno10 · #4 (**permalink**) 22/09/2014, 11:17

pone el código, sino se nos hace muy difícil ayudarte

gonzalss · #5 (**permalink**) 22/09/2014, 12:56

Muchas gracias por la respuesta,

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE HTML>
<HTML>

<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<head>
<meta charset="UTF-8">

<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300' rel='stylesheet' type='text/css'>
<link href='templates/aptc/css/template.css' rel='stylesheet' type='text/css'>

<base/>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta property="og:url" content="index.html" />
<meta property="og:title" content="Home" />
<meta property="og:type" content="website" />
<meta name="generator" content="Joomla! - Open Source Content Management" />
<title>Escuela</title>
<link href="templates/aptc/favicon_old.ico" rel="shortcut icon" type="image/vnd.microsoft.icon" />

<script src="media/system/js/mootools-core.js" type="text/javascript"></script>
<script src="media/system/js/core.js" type="text/javascript"></script>

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

<script src="components/com_k2/js/k2e4af.js?v2.6.7&sitepath=/" type="text/javascript"></script>

<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>

<script type="text/javascript">

function validarFormulario(){
$("#formulario").validate();
}
$(document).ready(function(){
validarFormulario();
});
</script>

<script type="text/javascript">
function validarFormulario(){
jQuery.validator.messages.required = 'Esta campo es obligatorio.';
jQuery.validator.messages.number = 'Esta campo debe ser numérico.';
jQuery.validator.messages.email = 'La dirección de correo es incorrecta.';
$("#formulario").validate();
}
</script>

<script src="templates/aptc/js/jquery.cycle.all.js" language="javascript" type="text/javascript"></script>

<script type="text/javascript">

// Slideshow

jQuery(document).ready(function() {

// Slideshow

jQuery('.homeBanner #bannerSlidesContainer').cycle({
fx: 'fade',
speed: 1000,
timeout: 8000,
pause: 1,
pager: '#bannerPager'
});

});

jQuery.noConflict();

</script>

</head>

<body>

<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>

<div id="menuContainer">

<div id="menuWidth">

<div id="logo">

<img src="templates/aptc/images/logito2.png" alt="Corbacho Tenis">

<a href="https://www.facebook.com/Corbachotenis2012" class="facebookLink"><img src="templates/aptc/images/face.png" alt="Facebook" />
</a>
<a href="https://twitter.com/Corbachotenis" class="facebookLink"><img src="templates/aptc/images/twit.png" alt="Twitter" />
</a>

<a href="https://www.youtube.com/Corbachotenis" class="facebookLink"><img src="templates/aptc/images/youtube.png" alt="youtube" />
</a>

</div>

<div id="menu">

<ul class="menu">
<li class="item-101 current active"><a href="index.html" >Inicio</a></li>

<li class="item-131"><a href="escuela.html" >Escuela</a></li>

</ul>

</div>

</div>

</div>

<div id="banner" class="homeBanner">

<div id="bannerWidth">

<div id="bannerSlides">

<div id="bannerPager"></div>

<div id="bannerSlidesContainer">

<div class="bannerSlide">

<div class="bannerText">
<p style="font-size:14px; line-height:24px" >Página</p> </div>

<div class="bannerImage"><img src="templates/aptc/images/pista.jpeg" alt=""/></div>

</div>
<div class="bannerSlide">

<div class="bannerText">
<p style="font-size:14px; line-height:24px" >Pá</p> </div>

<div class="bannerImage"><img src="templates/aptc/images/principal.jpg" alt="Sample Banner"/></div>

</div>

<div class="bannerSlide">

<div class="bannerText">
<p style="font-size:14px; line-height:24px" >Pág</p> </div>

<div class="bannerImage"><img src="templates/aptc/images/slider1.jpg" alt="slider1"/></div>

</div>

</div>

</div>

<div id="ball1"></div>
<div id="ball2"></div>

</div>

<div id="bannerShadow"><img src="templates/aptc/images/banner_shadow.png" alt=""></div>

</div>

<div id="contentContainer">

<div id="contentWidth">

<div class="clearfix">

<p>Paseo de la Ermita del Santo 48 </p>
<p>Teléfono 601125451 </p>
<br>

<h2><a class="jcebox">
<img src="templates/aptc/images/boxeotrans.png" border="0" alt="foto1" width="400" height="400" style="margin: 0px 0px 10px 10px; float: right;" />
</a></h2>

<h1>Contacta con nosotros </h1>

<form id="formulario" action="escuela.html" method="post">
<label for="nombre_y_apellido"> (*) Nombre y apellido </label>
<br />
<input type="text" name="nombre_y_apellido" id="nombre_y_apellido" class="required" />
<br />
<label for="sueldo"> (*) Sueldo estimativo </label>
<br />
<input type="text" name="sueldo" id="sueldo" size="5" maxlength="5" class="required number" />
<br />
<label for="email"> (*) E-mail </label>
<br />
<input type="text" name="email" id="email" class="required email" />
<br />
<label for="telefono"> Teléfono </label>
<br />
<input type="text" name="telefono" id="telefono" />
<br />
<label for="cv"> Cv </label>
<br />
<textarea rows="5" cols="50" name="cv" id="cv" class="required"></textarea>
<br />
(*) Campos requeridos
<br />
<input type="submit" id="enviar" value="Enviar" />
<div id="contenedor_errores"></div>
</form>

<p> Al hacer </p>
</div>

<div class="homeItemText">
</div>

</div>
</a>
</div>



</div>

</div>

</div>

<div id="bottomContent">

<div id="bottomContentWidth">

<div class="clearfix">

<div class="bottomContent">

<h3>Temporada 2014-2015 </h3>

<p class="date"> 01/09 </p>

<p><span style="font-family: arial, helvetica, sans-serif; font-size: 10pt;"> Arrancamos la escuela</span></p>
<a class="readmore" href="escuela.html">Leer más</a>

</div>

<div class="bottomContent">

<h3>Clase gratis </h3>

<p class="date"> 21 Julio 2014</p>


<a href="clasegratis.html">
<img src="templates/aptc/images/clase-gratis.png" alt="clase" style="width:100px; height:auto;" />
</a>

</div>

<div class="bottomContent">

<h3>Promocion </h3>

<p class="date"> 10 de Septiembre 2014</p>

<p><span style="font-family: arial, helvetica, sans-serif; font-size: 10pt;">Descuento para familias</span></p>
<a class="readmore" href="promociones.html">Leer más</a>

</div>

<div class="bottomContent">

<h3>Promoción </h3>

<p class="date"> 11 de Septiembre 2014</p>

<p><span style="font-family: arial, helvetica, sans-serif; font-size: 10pt;">Trae a un amigo </span></p>
<a class="readmore" href="promociones.html">Leer más</a>

</div>

</div>

</div>

</div>

<div id="footer">

<div id="footerLeft">

<div class="custom" >
<h2>Sponsors <sub style="font-size: 11px;"> Si tu estas interesado en ser nuestro sponsor , ponte en contacto por email </h2>

<script type='text/javascript'>

</script><br /></sub></h2>

<p>
<a href="http://www.http://180pulsaciones.com"><img src="templates/aptc/images/180pulsaciones2.png" border="0" alt="" /></a>

</p>

</div>

</div>

<div id="footerMiddle">

<div class="custom" >
<h2>Teléfono : </h2>
<p> 601125451 <br />
<script type='text/javascript'>
\n </script><script type='text/javascript'>

</script>
<script type='text/javascript'>

</script><br /> </p></div>
</div>

<div id="footerRight">

<div class="custom" >
<a href="index.html">

<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d3038.083371930827!2d-3.7245350999999998!3d40.4070038!3m2!1i1024!2i768!4 f13.1!3m3!1m2!1s0xd4227e7356c73fb%3A0x7805104f4afc d592!2sPaseo+de+la+Ermita+del+Santo%2C+48%2C+28011 +Madrid!5e0!3m2!1ses!2ses!4v1408010456411" width="200" height="150" frameborder="0" style="border:0"></iframe>
</a></div>
</div>

</div>

</body>

</HTML>

Tengo que tener cuidado con lo que quito, ya que tengo un slider que corre con jquery
La url es :
http://pruebagonzalo.org.es/tenis/escuela

diurno10 · #6 (**permalink**) 22/09/2014, 13:19

Código:

$(document).ready(function() { 
      $("#formulario").validate({
		meta: "validate",
	
		rules: {
			nombre:  "required",
			sueldo: {required:true,number:true},
			email: {required:true,email:true}
		},
		messages: {
			nombre: "Esta campo es obligatorio",
			sueldo: "Esta campo debe ser num&eacute;rico.",
                        email: La direcci&oacute;n de correo es incorrecta
		}
	});
});

proba con esto, si funciona, vemos como manejar los mensajes

diurno10 · #7 (**permalink**) 22/09/2014, 13:21

Otra cosa, siempre la primer libreria a cargar es jquery, despues todas las demas.

gonzalss · #8 (**permalink**) 22/09/2014, 13:27

Sigue sin hacer caso a las validaciones :(
Como puedo poner la página entera amigo

Muchisimas gracias por tu ayuda

diurno10 · #9 (**permalink**) 22/09/2014, 14:33

che, por lo que veo en sitio , tenes un lio importante, primero, decidi si vas a utilizar jquery o mootools, no ambas mezclar librerias es para lio.
Segundo, podrias aplicar los cambios que yo te pase online, asi veo como queda
Tercero, cuando pongas lo que yo te pase borra esta cosa

Código:

function validarFormulario(){
$("#formulario").validate();
}
$(document).ready(function(){
validarFormulario();
});

y esta tambien


function validarFormulario(){
jQuery.validator.messages.required = 'Esta campo es obligatorio.';
jQuery.validator.messages.number = 'Esta campo debe ser num&eacute;rico.';
jQuery.validator.messages.email = 'La direcci&oacute;n de correo es incorrecta.';
$("#formulario").validate();
}

cuando lo subas lo reviso y te digo que onda, dale?

gonzalss · #10 (**permalink**) 22/09/2014, 15:13

Ya he cambiado lo que me has dicho . Lo he subido aqui
http://pruebagonzalo.org.es/tenis/escuela2
Sigue sin validar el formulario.

Respecto a lo que me dices, prefiero trabajar con Jquery

jvier · #11 (**permalink**) 22/09/2014, 15:18

Intenta poner las comillas en:

La dirección de correo es incorrecta

gonzalss · #12 (**permalink**) 22/09/2014, 15:29

La lo he subido . incluido he metido un alert dentro del script para ver si entra dentro y no lo hace ...

http://pruebagonzalo.org.es/tenis/escuela2

jvier · #13 (**permalink**) 22/09/2014, 15:31

Ahora se te fue un punto y coma de mas (;) ahi no va, solo quitala Saludos!

gonzalss · #14 (**permalink**) 22/09/2014, 15:33

Ya quité el ;

gonzalss · #15 (**permalink**) 22/09/2014, 15:35

Si le doy a inspeccionar elemento me dice :Uncaught TypeError: undefined is not a function

jvier · #16 (**permalink**) 22/09/2014, 15:36

Cita:

Iniciado por gonzalss

Si le doy a inspeccionar elemento me dice :Uncaught TypeError: undefined is not a function

Ya sospecho que como te lo dijieron arriba el mootools puede tener que ver. intenta quitarlo y prueba

gonzalss · #17 (**permalink**) 22/09/2014, 15:43

Ya he quitado estas dos lineas


y nada. A ver si nos acercamos .

Lo raro es que no entre en el script con la alerta que hemos metido

jvier · #18 (**permalink**) 22/09/2014, 15:51

ya se cual era el conflicto!
est esta linea!

<script src="components/com_k2/js/k2e4af.js?v2.6.7&sitepath=/" type="text/javascript"></script>

gonzalss · #19 (**permalink**) 22/09/2014, 15:56

Ademas de quitar esa linea tendría que poner estas,no ?
<script src="js/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>

jvier · #20 (**permalink**) 22/09/2014, 16:00

Cita:

Iniciado por gonzalss

Ademas de quitar esa linea tendría que poner estas,no ?
<script src="js/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>

Código Javascript:

Ver original<script src="js/jquery.min.js" type="text/javascript"></script> 
    <script type="text/javascript" src="js/jquery-1.8.3.js"></script> <--- esta no
    <script type="text/javascript" src="js/jquery.validate.js"></script>

gonzalss · #21 (**permalink**) 22/09/2014, 16:07

Sigue sin entrar en la validación del formulario .
:(
He modificado las lineas que me has dicho

jvier · #22 (**permalink**) 22/09/2014, 16:13

Tu pagina esta algo extraña...
primero... ese segundo alert que pusiste quitalo porque ahi provoca error.

y segundo algo pasa con tu script jquery.validate.js
te aconsejo lo descargues de nuevo, y isa la version jquery.validate.min.js

Parece como si tuvieras una redireccion en ese archivo

gonzalss · #23 (**permalink**) 22/09/2014, 16:20

He quitado los dos alert
y he apuntado contra jquery-validate.min.

Ahora tengo dos problemas ,los formularios siguen sin validarse y no funciona el slider de las fotos.

De todos modos muchisimas gracias por tu ayuda.A ver si lo sacamos

jvier · #24 (**permalink**) 22/09/2014, 16:30

busca esta linea y la quitas y me cuentas:
jQuery.noConflict();

gonzalss · #25 (**permalink**) 22/09/2014, 16:33

Se ha solucionado las fotos del slider, pero el el formulario no se valida.

gonzalss · #26 (**permalink**) 22/09/2014, 16:53

Y me he descargado una nueva versión de <script type="text/javascript" src="js/jquery-validate.min.js"></script>

jvier · #27 (**permalink**) 22/09/2014, 16:59

De acuerdo.. ahora solo

borra esto:

Código Javascript:

Ver original<script type="text/javascript">
 
       
       $(document).ready(function() { 
      
      $("#formulario").validate({
     
        meta: "validate",
    
        rules: {
            nombre:  "required",
            sueldo: {required:true,number:true},
            email: {required:true,email:true}
        },
        messages: {
            nombre: "Esta campo es obligatorio",
            sueldo: "Esta campo debe ser num&eacute;rico.",
                        email: "La direcci&oacute;n de correo es incorrecta"
        }
    });
});
       
    
    </script>

y borra esto:

Código Javascript:

Ver original<script type="text/javascript">
 
// Slideshow
 
jQuery(document).ready(function() {
    
    // Slideshow
    
    jQuery('.homeBanner #bannerSlidesContainer').cycle({ 
        fx:     'fade', 
        speed:   1000, 
        timeout: 8000, 
        pause:   1,
        pager: '#bannerPager'
    });
    
});
 
jQuery.noConflict();
 
</script>

y justo antes de:

Código HTML:

Ver original</body>

pega esto

Código Javascript:

Ver original<script type="text/javascript">
 
 
         $(function() {
             jQuery('.homeBanner #bannerSlidesContainer').cycle({
                 fx: 'fade',
                 speed: 1000,
                 timeout: 8000,
                 pause: 1,
                 pager: '#bannerPager'
             });
 
             $("#formulario").validate({
                 meta: "validate",
                 rules: {
                     nombre: "required",
                     sueldo: {required: true, number: true},
                     email: {required: true, email: true}
                 },
                 messages: {
                     nombre: "Esta campo es obligatorio",
                     sueldo: "Esta campo debe ser num&eacute;rico.",
                     email: "La direcci&oacute;n de correo es incorrecta"
                 }
             });
         });
 
 
    </script>

gonzalss · #28 (**permalink**) 22/09/2014, 17:08

Ya he borrado las dos cosas y pegado el nuevo código . :(

jvier · #29 (**permalink**) 22/09/2014, 17:11

tienes que pegarlo antes de la etiqueta </body> de tu documento, (osea que casi hasta el final),

ademas tu jquery.validate no es la nueva version, necesitas descgargar la nueva que es la 1.13

gonzalss · #30 (**permalink**) 22/09/2014, 17:20

!!!! Ya funciona !!!!
Muchisimas gracias amigo. ¿Era por la version del validate ?