Jquery Ui Dialog With Form Validation Plugin

January 25, 2024 Post a Comment

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

Solution 1:

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

Solution 2:

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({
                        ...
                    });
                }, ...

Solution 3:

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/

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

            }
           returnfalse;
        }
 },

Solution 5:

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.

Baca Juga

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,

<scripttype="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,

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

JavaScript Free