Organizational Research By

Surprising Reserch Topic

jquery ui dialog validate using -',,ajax,jquery-validate,jquery-ui-dialog'

jquery ui dialog validate  using -',,ajax,jquery-validate,jquery-ui-dialog'

I'm having trouble in validating a jQuery UI dialog using Jquery Validate upon clicking Save.

Here's my code to create Jquery dialog. It loads the dialog from a target a href URL:


function dialogForms() {
  $('a.dialog-form').click(function() {
    var a = $(this);
      var dialog = $('<div>').attr('id','formDialog').html($(resp).find('form:first').parent('div').html());
        title: a.attr('title') ? a.attr('title') : '',
        modal: true,
        buttons: {
          'Save': function() {submitFormWithAjax($(this).find('form'));},
          'Cancel': function() {$(this).dialog('close');}
        close: function() {$(this).remove();},
        width: 'auto'
    }, 'html');
    return false;

function submitFormWithAjax(form) {
    form = $(form);
        beforeSend: function(data) {
        url: form.attr('action'),
        data: form.serialize(),
        type: (form.attr('method')),
        dataType: 'text',
        error: function(data) {
        success: function(data) {
            setTimeout("reloadPage()", 500);
  return false;

The beforeSend is called, but it doesn't seem to call the validate method, which is located on the parent page from which Dialog is called.

        $(document).ready(function() {
                rules: {
                    Name: {
                        required: true
                    Category: {
                        required: true
                messages: {
                    Name: "Please enter an event name",
                    Category: "Please choose a category"
                submitHandler: function(form) {
                    //                    $('#loading_1').show();
                    //                    $('#proceed_c').hide();
                    //                    $(form).ajaxSubmit();
                    //                    //form.submit();
                errorPlacement: function(error, element) {


Is the problem with the beforeSend within submitFormWithAjax function, the location of $("#event_form").validate or the submitHandler: function(form) within it? Any help will be greatly appreciated.

asked Sep 7, 2015 by rajesh
0 votes

Related Hot Questions

Your answer

Your name to display (optional):
Privacy: Your email address will only be used for sending these notifications.
Anti-spam verification:
To avoid this verification in future, please log in or register.