Question

I am currently using the bassistance validation plugin for my forms. And I am using a pop-up modal dialog box to house a form that needs to be validated, but for some reason it isn’t calling my form… all of my ID’s and references are working and I still don’t any success.

Perhaps someone can shed some light for me.
Here is my Javascript code.

$("#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

I solved a similar issue in 3 steps:

1. Attaching the validator to the form:

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

2. When the Save button of your modal form is clicked, submit the form (the validator will be triggered):

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

3. Move the submit logic to the validator submitHandler:

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