Question

114

jQuery UI Dialog with Form Validation Plugin

rated 0 times [ 119] [ 5] / answers: 1 / hits: 22413 / 14 Years ago, wed, december 15, 2010, 12:00:00

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); 

        } 

    }

});

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

travion

Add To Favorites

Follow

Total Points: 137

Total Questions: 96

Total Answers: 103

Location: India

Member since Wed, Aug 4, 2021

3 Years ago

travion questions

1 Tagify set data in tagify input on click

Mon, Dec 16, 19, 00:00, 5 Years ago

1 Laravel - How to Import Vue Component to Another Component

Sat, Oct 19, 19, 00:00, 5 Years ago

1 Date conversion in react js

Fri, Sep 20, 19, 00:00, 5 Years ago

1 How can I style react semantic components?

Wed, Nov 14, 18, 00:00, 6 Years ago

1 Problem with onChange for Masked Input in React

Sun, Oct 28, 18, 00:00, 6 Years ago

View All

answered 14 Years ago blair · Accepted Answer

I solved a similar issue in 3 steps:

Attaching the validator to the form:
```
$('#your-form-id').validate();
```

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();

  },
```

Move the submit logic to the validator submitHandler:

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

  submitHandler: function(form) {

    // do stuff

  }

});