Form Validation jQuery plugin success.form.fv event not working

1.8k views Asked by At

I am trying to build a dynamic popup that allows the user to edit data in a datatable without redirecting the page. I am using NodeJS with jQuery 'modal' library for the popup and 'formvalidation' library to validate and submit the data. (Note: This is not the same library as jquery validate).

Here's a demo of exactly what I am attempting to accomplish.

http://formvalidation.io/examples/loading-saving-data-modal/

I got most of the code working, I was able to display the modal window, passing in data and the validation works properly, too. The problem is that the success.form.fv event is not being triggered, the dialog just closes.

script.
    $(document).ready(function () {
      $('#editFilepathForm')
        .formValidation({
          framework: 'bootstrap',
          icon: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
          },
          fields: {
            id: {
              validators: {
                notEmpty: {
                  message: 'ID is required'
                }
              }
            },
            edited_filepath: {
              validators: {
                notEmpty: {
                  message: 'Edited Filepath is required'
                },
                regexp: {
                    regexp: /^[a-zA-Z\s]+$/,
                    message: 'The full name can only consist of alphabetical characters'
                }
              }
            },
            edited_filename: {
              validators: {
                notEmpty: {
                  message: 'Edited Filename is required'
                },
                regexp: {
                    regexp: /^[a-zA-Z\s]+$/,
                    message: 'The full name can only consist of alphabetical characters'
                }
              }
            }
          }
        })
//THIS EVENT IS NOT TRIGGERING AT ALL. ALERT MESSAGE DOES NOT APPEAR. THE BOX JUST CLOSES AFTER SUCCESSFUL VALIDATION.
        .on('success.form.fv', function (e) {
          alert('success');
          // Save the form data via an Ajax request
          e.preventDefault();

          var $form = $(e.target),
            id = $form.find('[name="id"]').val();

            // Hide the dialog
            $form.parents('.bootbox').modal('hide');

            // You can inform the user that the data is updated successfully
            // by highlighting the row or showing a message box
            bootbox.alert('The user profile is updated');
          //});
        });

      $('.editButton').on('click', function () {
          var id = $(this).attr('data-id');
          var requested_filepath = $(this).attr('data-requested-filepath');
          var requested_filename = $(this).attr('data-requested-filename');

          /*Set original requested values to display in modal form window*/
          $('#editFilepathForm')
            .find('[name="id"]').html(id).end()
            .find('[name="requested_filepath"]').html(requested_filepath).end()
            .find('[name="requested_filename"]').html(requested_filename).end()
            .find('[name="edited_filepath"]').val(requested_filepath).end()
            .find('[name="edited_filename"]').val(requested_filename).end()

          // Show the dialog
          bootbox
            .dialog({
              title: 'Edit Requested Filepath',
              message: $('#editFilepathForm'),
              show: false // We will show it manually later
            })
            .on('shown.bs.modal', function () {
              $('#editFilepathForm')
                .show() // Show the login form
                .formValidation('resetForm'); // Reset form
            })
            .on('hide.bs.modal', function (e) {
              // Bootbox will remove the modal (including the body which contains the login form)
              // after hiding the modal
              // Therefor, we need to backup the form
              $('#editFilepathForm').hide().appendTo('body');
            })
            .modal('show');
        //});
      });
    });
1

There are 1 answers

0
ktamaral On

I was able to resolve the issue by adding the 'excluded' property as explained in the documentation.

http://formvalidation.io/examples/modal/