jQuery UI Diálogo con complemento de validación de formulario

Question

Actualmente estoy usando el bassistance validation plugin para mis formularios. Y estoy usando un cuadro de diálogo emergente modal para albergar un formulario que necesita ser validado, pero por alguna razón no está llamando a mi formulario ... todas mis identificaciones y referencias están funcionando y todavía no lo hago éxito.

Quizás alguien pueda arrojar algo de luz sobre mí. Aquí está mi código Javascript.

$("#addEventDialog").dialog("open"); 

$("#addEventDialog").dialog({ 
    title: 'Add Event', 
    modal: true, 
    buttons: { 
     "Save": function() { 
      $("#interestForm").validate({ 
       submitHandler: function(form) { 
        $("#calendarWidget2").ajaxSubmit({ 
         target: "#calendarResponse", 
         dataType: 'json', 
         beforeSubmit: function() { 
          $('input[type=submit]').attr("disabled", true); 
          $("#calendarResponse").show('slow'); 
         }, 
         success: function(response, event) { 
          if(response.status == true) { 
           $('input[type=submit]').attr("disabled", false); 
           $("#calendarResponse").delay(5000).fadeOut('slow'); 

           //If the widget says it's okay to refresh, refresh otherwise, consider it done 
           if(response.refreshEvents == '1') { 
            $("#calendar").fullCalendar("refetchEvents"); 
           } 
           // Close the dialog box when it has saved successfully 
           $("#addEventDialog").dialog("destroy"); 
           // Update the page with the reponse from the server 
           $("#calendarResponse").append("Successfully Added: "+ response.title +"<br />"); 
          } else { 
           $("#calendarWidget2").validate(); 
           $("#calendarResponse").append("ERROR: "+ response.status +"<br />");  
          } 
         }, 
         error: function() { 
          alert("Oops... Looks like we're having some difficulties.");  
         } 
        }); 
       } 
      }); 
     }, 
     "Cancel": function() { 
      $(this).dialog("close"); 
     } 
    } 
}); 

Answer 1

He resuelto un problema similar en 3 pasos:

1. Colocación de la validación de la forma:

   $('#your-form-id').validate(); 
   

2. Cuando se hace clic en el botón Guardar de la forma modal, presentar el formulario (el validador se activará):

   buttons: { 
       "Save": function() { 
       $('#your-form-id').submit(); 
       }, 
   

3. Mover la lógica se someten a la submitHandler validador:

   $('#your-form-id').validate({ 
       submitHandler: function(form) { 
       // do stuff 
       } 
   }); 
   

Answer 2

El validadores validate función simplemente configura la validación, no se desencadenan. La activación se realiza automáticamente cuando se envía el formulario o cuando un campo se escribe en Trate de añadir el código de validación al evento open:.

$("#addEventDialog").dialog("open"); 
      $("#addEventDialog").dialog({ 
       open: function() { 
        $("#interestForm").validate({ 
         ... 
        }); 
       }, ... 

Answer 3

intentar algo como esto. Ponga su formulario validar cosas fuera del script de diálogo o supongo que la devolución de llamada abierta también funcionará.

buttons : { 
     "Cancel" : function() { 
      $(this).dialog('close'); 
     }, 
     "Submit" : function() { 
      var isValid = $("#yourForm").valid(); 
      if(isValid) { 
       var formData = $("#yourForm")serialize(); 
       // pass formData to an ajax call to submit form. 

      } 
      return false; 
     } 
}, 

Answer 4

Sé que esta pregunta es viejo. Pero este vino primero cuando estaba buscando este problema en particular. Entonces creo que esto puede ayudar a otros. Por fin logró lograr esto.

consulte http://jsfiddle.net/536fm/6/

Answer 5

que tenían el mismo problema usando jQuery plugin de diálogo (http://jqueryui.com/dialog/) con jQuery plugin de Validador (http://jqueryvalidation.org/). El problema es que el cuadro de diálogo jQuery-UI no se agrega al formulario, se agrega justo antes de </body >, por lo que los elementos para validar están fuera de la sección < del formulario > </form >.

Para resolver este problema agrego el atributo "abrir" en la inicialización del cuadro de diálogo. Dentro de este atributo, agrego una función que envuelve mi elemento Di de diálogo dentro de un elemento de formulario y luego inicializo el validador.

Además, agrego el atributo "cerrar" en la inicialización del cuadro de diálogo. Dentro de este atributo, agrego una función que desenvuelve el formulario que envuelve el evento abierto y restablece el validador.

Un ejemplo sencillo,

<script type="text/javascript"> 
var validator; 
$(document).ready(function() { 
    $("#dialog-id").dialog({ 
    autoOpen: false, 
    resizable: true, 
    width: 450, 
    modal: true, 
    // Open event => wraps the Dialog source and validate the form. 
    open: function (type, data) { 
     $(this).wrap("<form id=\"form-id\" action=\"./\"></form>"); 
     validator = $("#form-id").validate(); 
    }, 
    // Close event => unwraps the Dialog source and reset the form to be ready for the next open! 
    close: function (type, data) { 
     validator.resetForm(); 
     $(this).unwrap(); 
    }, 
    buttons: { 
     "Cancel": function() { 
      $(this).dialog("close"); 
     }, 
     "Create": function() { 
      validator.form(); 
     } 
    } 
}); 
</script> 

algo de HTML para el Javascript anterior,

<div id="dialog-id" title="Thematic Section"> 
    <div class="form_description"> 
     Create a thematic section for a conference type. 
    </div> 
    <ul style="list-style-type:none;"> 
     <li> 
      <label class="description" for="conferencetype_id">Conference Type:</label> 
      <div> 
       <select id="conferencetype_id" name="conferencetype_id" style="width:150px;"> 
        <option value="1" selected="selected">Type-1</option> 
        <option value="2" selected="selected">Type-2</option> 
        </select> 
      </div> 
     </li> 
     <li> 
      <label class="description" for="title">Title:</label> 
      <div> 
       <input id="title" name="title" type="text" maxlength="100" value="" style="width:350px;" required/> 
      </div> 
     </li> 
    </ul> 
</div>