Foros del Web » Programando para Internet » Jquery »

jquery modal y validacion

 Estas en el tema de jquery modal y validacion en el foro de Jquery en Foros del Web. hola amigos del foro espero me puedan ayudar me encuentro integrando a una aplicacion jquery modal pero he tenido inconvenientes en la parte de la ...
  #1 (permalink)  
Antiguo 05/05/2012, 23:33
 
Fecha de Ingreso: septiembre-2010
Mensajes: 1.853
Antigüedad: 13 años, 7 meses
Puntos: 6
jquery modal y validacion
hola amigos del foro espero me puedan ayudar

me encuentro integrando a una aplicacion jquery modal pero he tenido inconvenientes en la parte de la validacion

este es el codigo hasta el momento no pasa por la validacion


Código Javascript: 
Ver original
  1. $("#dialog-form").dialog('open');
  2.          $( "#dialog:ui-dialog" ).dialog( "destroy" );
  3.          var title = $( "#title" ),
  4.          allFields = $( [] ).add( title ),
  5.          tips = $( ".validateTips" ); 
  6.                 function updateTips( t ) {
  7.             tips
  8.                 .text( t )
  9.                 .addClass( "ui-state-highlight" );
  10.             setTimeout(function() {
  11.                 tips.removeClass( "ui-state-highlight", 1500 );
  12.             }, 500 );
  13.         }
  14.  
  15.         function checkLength( o, n, min, max ) {
  16.             if ( o.val().length > max || o.val().length < min ) {
  17.                 o.addClass( "ui-state-error" );
  18.                 updateTips( "Length of " + n + " must be between " +
  19.                     min + " and " + max + "." );
  20.                 return false;
  21.             } else {
  22.                 return true;
  23.             }
  24.         }
  25.  
  26.         function checkRegexp( o, regexp, n ) {
  27.             if ( !( regexp.test( o.val() ) ) ) {
  28.                 o.addClass( "ui-state-error" );
  29.                 updateTips( n );
  30.                 return false;
  31.             } else {
  32.                 return true;
  33.             }
  34.         }
  35.                  
  36.         $( "#dialog-form" ).dialog({
  37.             autoOpen: false,
  38.             height: 550,
  39.             width: 800,
  40.             modal: true,
  41.             buttons: {
  42.                 "Crear Nuevo Evento": function() {
  43.                 
  44.                 var bValid = true;
  45.                     allFields.removeClass( "ui-state-error" );
  46.  
  47.                     bValid = bValid && checkLength( title, "title", 3, 16 );
  48.                     
  49.                         var arrayOpt = new Array;
  50.               $('input[type=checkbox]').each(function() {
  51.                         if ($(this).attr('name') == 'opcion[]') {
  52.                             if ($(this).attr('checked') == 'checked') {
  53.                                 arrayOpt.push($(this).val());
  54.                                 
  55.                             }
  56.                         }
  57.                     });
  58.                 //alert (arrayOpt);
  59.          $("#start").val($.fullCalendar.formatDate(start, 'MM/dd/yyyy HH:mm:ss'));
  60.          $("#end").val($.fullCalendar.formatDate(end, 'MM/dd/yyyy HH:mm:ss'));
  61.          $("#allDay").val(allDay);
  62.                 
  63.                 var titleq = $("#title").val();
  64.                 var startq = $("#start").val();
  65.                 var endq = $("#end").val();
  66.                 var allDayq = $("#allDay").val();
  67.                 var nombre = $("#autor").val();
  68.                 
  69.                   
  70.               
  71.                               $.ajax({ 
  72.                   url:'archivo.php',
  73.                   type:'post',
  74.                   data:'opciones='+arrayOpt+'&title='+titleq+'&start='+startq+'&end='+endq+'&allDay='+allDay+'&nombre='+nombre,
  75.                   }).done(function(data) {
  76.                  //alert(titleq+" "+arrayOpt+" "+startq+" "+endq);
  77.                  $('#calendar').fullCalendar( 'refetchEvents' )
  78.                 
  79.     
  80.                   });
  81.                     $( this ).dialog( "close" );
  82.                                         
  83.                     
  84.                 },
  85.                 
  86.                 
  87.                 Cancelar: function() {
  88.                     $( this ).dialog( "close" );
  89.                     
  90.                     
  91.                 }
  92.             },
  93.             close: function() {
  94.                 allFields.val( "" ).removeClass( "ui-state-error" );
  95.             }
  96.         });


pero si en esta parte del codigo quito esta line ($( this ).dialog( "close" );
)
Código Javascript: 
Ver original
  1. $('#calendar').fullCalendar( 'refetchEvents' )
  2.                 
  3.     
  4.                   });
  5.                     $( this ).dialog( "close" );

el formulario muestra los mensajes de validacion pero a la base de datos se envian los valores



Código HTML: 
Ver original
  1. <div id="dialog-form" title="Crear Nuevo Evento">
  2. <p class="validateTips">All form fields are required.</p>
  3. <form id="modal">
  4.         <label for="name">Evento</label>
  5.         <input type="text" name="title" id="title" class="text ui-widget-content ui-corner-all" />






que estoy haciendo mal?

gracias
Última edición por Montes28; 06/05/2012 a las 09:23
  #2 (permalink)  
Antiguo 07/05/2012, 22:18
 
Fecha de Ingreso: septiembre-2010
Mensajes: 1.853
Antigüedad: 13 años, 7 meses
Puntos: 6
Respuesta: jquery modal y validacion
hola amigos el problema era porque estaba mal ubicado el if ( bValid ) {

este es el codigo de la ventana modal funcionando con validacion por si alguien lo necesita

Código Javascript: 
Ver original
  1. $("#dialog-form").dialog('open');
  2.          $( "#dialog:ui-dialog" ).dialog( "destroy" );
  3.          var title = $( "#title" ),
  4.          allFields = $( [] ).add( title ),
  5.          tips = $( ".validateTips" ); 
  6.                 function updateTips( t ) {
  7.             tips
  8.                 .text( t )
  9.                 .addClass( "ui-state-highlight" );
  10.             setTimeout(function() {
  11.                 tips.removeClass( "ui-state-highlight", 1500 );
  12.             }, 500 );
  13.         }
  14.  
  15.         function checkLength( o, n, min, max ) {
  16.             if ( o.val().length > max || o.val().length < min ) {
  17.                 o.addClass( "ui-state-error" );
  18.                 updateTips("Error este campo es obligatorio, Debe ingresar un nombre para el evento");
  19.                 //updateTips( "Length of " + n + " must be between " +
  20.                 //  min + " and " + max + "." );
  21.                 return false;
  22.             } else {
  23.                 return true;
  24.             }
  25.         }
  26.  
  27.         /*function checkRegexp( o, regexp, n ) {
  28.             if ( !( regexp.test( o.val() ) ) ) {
  29.                 o.addClass( "ui-state-error" );
  30.                 updateTips( n );
  31.                 return false;
  32.             } else {
  33.                 return true;
  34.             }
  35.         }*/
  36.         
  37.         
  38.                  
  39.         $( "#dialog-form" ).dialog({
  40.             autoOpen: false,
  41.             height: 580,
  42.             width: 850,
  43.             modal: true,
  44.             buttons: {
  45.                 "Crear Nuevo Evento": function() {
  46.                 
  47.                 var bValid = true;
  48.                     allFields.removeClass( "ui-state-error" );
  49.  
  50.                     bValid = bValid && checkLength( title, "title", 3, 80 );
  51.                     //bValid = bValid && checkRegexp( title, /^[a-z]([0-9a-z_])+$/i, "Username may consist of a-z, 0-9, underscores, begin with a letter." );
  52.                     
  53.                         var arrayOpt = new Array;
  54.               $('input[type=checkbox]').each(function() {
  55.                         if ($(this).attr('name') == 'opcion[]') {
  56.                             if ($(this).attr('checked') == 'checked') {
  57.                                 arrayOpt.push($(this).val());
  58.                                 
  59.                             }
  60.                         }
  61.                     });
  62.                 //alert (arrayOpt);
  63.          $("#start").val($.fullCalendar.formatDate(start, 'MM/dd/yyyy HH:mm:ss'));
  64.          $("#end").val($.fullCalendar.formatDate(end, 'MM/dd/yyyy HH:mm:ss'));
  65.          $("#allDay").val(allDay);
  66.                 
  67.                 var titleq = $("#title").val();
  68.                 var startq = $("#start").val();
  69.                 var endq = $("#end").val();
  70.                 var allDayq = $("#allDay").val();
  71.                 var nombre = $("#autor").val();
  72.                 
  73.                   
  74.               
  75.               /*$('#modal').each (function(){
  76.               this.reset();
  77.               });*/
  78.                   if ( bValid ) {
  79.                   $.ajax({ 
  80.                   url:'archivo.php',
  81.                   type:'post',
  82.                   data:'opciones='+arrayOpt+'&title='+titleq+'&start='+startq+'&end='+endq+'&allDay='+allDay+'&nombre='+nombre,
  83.                   }).done(function(data) {
  84.                  //alert(titleq+" "+arrayOpt+" "+startq+" "+endq);
  85.                  $('#calendar').fullCalendar( 'refetchEvents' )
  86.                 
  87.     
  88.                   }); 
  89.                   $( this ).dialog( "close" );
  90.                   }
  91.                     //$( this ).dialog( "close" );
  92.                                         
  93.                     
  94.                 },
  95.                 
  96.                 
  97.                 Cancelar: function() {
  98.                 $('input:checkbox').removeAttr('checked');
  99.                 allFields.val( "" ).removeClass( "ui-state-error" );
  100.                     $( this ).dialog( "close" );
  101.                     
  102.                     
  103.                 }
  104.             },
  105.             close: function() {
  106.             allFields.val( "" ).removeClass( "ui-state-error" );
  107.             $('input:checkbox').removeAttr('checked');
  108.                 
  109.             }
  110.         });

Etiquetas: ajax, formulario, input, modal, php
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 07:17.