jQuery UI Dialog with Form Validation Plugin

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

Answer 1

The validators validate function simply sets up validation, it does not trigger it. The triggering is done automatically when the form is submitted or when a field gets written in. Try adding your validation code to the open event:

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

Answer 2

I know this question is old. But this one came first when I was searching for this particular problem. So I think this may help others. At last managed to achieve this.

please see http://jsfiddle.net/536fm/6/

Answer 3

I had the same issue using jQuery Dialog plugin (http://jqueryui.com/dialog/) with jQuery Validator plugin(http://jqueryvalidation.org/). The problem is that the jQuery-UI dialog does not append to the form, it appends just before </body>, so the elements to validate are outside the <form></form> section.

To solve this issue i add the "open" attribute on the Dialog initialization. Inside this attribute i add a function that wraps my Dialog div element inside a form element and then initialize the validator.

Also, i add the "close" attribute on the Dialog initialization. Inside this attribute i add a function that unwraps the form i wrapped on the open event and resets the validator.

A simple example,

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

Some html for the above javascript,

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

Answer 4

Try something like this. Put your form validate stuff outside dialog script or i guess the open callback would work as well.

 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 5

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