¿Cómo hago la validación de formularios del lado del cliente en jQuery?

Estoy tratando de usar este complemento: http://docs.jquery.com/Plugins/Validation

Donde #user_new es el ID de mi formulario, así es como se ve mi código:

$('#user_new').validate({ rules: { user[username]: "required", user[email]: { required: true, email: true } }, messages: { user[username]: "Please specify your name", user[email]: { required: "We need your email address to contact you", email: "Your email address must be in the format of name@domain.com" } } }) 

Donde se ven estos campos de entrada cuando se representa la página (generada por Rails):

 





Estaba intentando validar primero el nombre de usuario y el correo electrónico. Entonces tómalo de ahí.

Por mi vida, no puedo averiguar cómo especificar la syntax y las reglas para trabajar con este complemento.

¡Ayuda!

Edit1: Aquí está la salida HTML para la etiqueta de formulario:

  

En cuanto a la pregunta sobre la depuración, cuando la incluyo así:

 $('#user_new').validate({ debug: true, rules: { user_username: "required", user_email: { required: true, email: true } }, messages: { user_username: "Please specify your name", user_email: { required: "We need your email address to contact you", email: "Your email address must be in the format of name@domain.com" } } }); 

No veo nada en mi consola JS.

Edit2: Cuando borro mis datos de inicio de sesión de datos y presiono enviar, no enviaré. No estoy seguro de si esto es algo que ver con la función validate () que realmente funciona. Pero no veo ningún mensaje emergente ni nada de eso.

Edit3: Parece que el problema podría ser una desconexión entre los campos de ID y nombre que tienen un nombre diferente. Sin embargo, Rails asigna el nombre y la identificación a ambos campos, por lo que no estoy seguro de cómo solucionarlo.

Edit4: He encontrado una solución. Lo agregué a un comentario bajo la respuesta elegida.

Creo que es porque el valor del atributo “nombre” en el formulario (la etiqueta de entrada) no coincide con la opción de validación jquery

 $('#user_new').validate({ debug: true, rules: { user_username: "required", // should be: "user[username]" user_email: { // should be: "user[email]" required: true, email: true } }, messages: { user_username: "Please specify your name", // should be: "user[username]" user_email: { // should be: "user[email]" required: "We need your email address to contact you", email: "Your email address must be in the format of name@domain.com" } } }); 

Edit: échale un vistazo a esta pregunta, creo que él tiene el mismo problema que tú eres jquery.validate in cakePHP

Edit2: para editar la forma en que se muestra, coloque un contenedor justo después de su etiqueta de entrada, digamos

 
//for username error message

añade estos códigos:

 $('#user_new').validate({ debug: true, rules: { //rules }, messages: { //messages }, errorPlacement: function(error, element) { if ( element.is(":radio") ) error.appendTo( element.parent().next());//if its a radio button else if ( element.is(":checkbox") ) error.appendTo ( element.next() );//if its a radio button else error.appendTo( element.parent().next() ); },//these lines of codes basically telling the jquery.validate plug-in to look for an element after }); 

y luego aplicar algunos css para poner en orden las cosas

  

o siempre puedes consultar la documentación para más modificaciones.

Prueba esto:

 $('#user_new').validate({ rules: { user_l_name: "required", user_email: { required: true, email: true } }, messages: { user_l_name: "Please specify your name", user_email: { required: "We need your email address to contact you", email: "Your email address must be in the format of name@domain.com" } } }) 

Asegúrese de que las variables que utiliza en las reglas y el Masaje sean las mismas que las ID de entrada y el Nombre. Lo que estoy tratando de decir es que su ID de entrada y su nombre deben ser los mismos para que esto funcione.

Tuve el mismo problema, si esto no funciona, hágamelo saber para que pueda asistir más.

Feliz codificacion !!!!

No estoy exactamente seguro de por qué lo anterior no funciona a mí mismo. Tal vez alguien más lo pueda detectar … Pero mientras tanto, eche un vistazo a la opción de depuración en los documentos. ¿Qué obtienes cuando habilitas esta opción?

Por favor, consulte este sitio http://bassistance.de/jquery-plugins/jquery-plugin-validation . Tienen un par de ejemplos con respecto a la validación de JQuery.

Espero eso ayude…

Feliz codificacion !!!