Question

我正在尝试构建一个动态弹出窗口，允许用户编辑数据表中的数据而无需重定向页面。我正在使用带有jQuery'modal'库的NodeJS用于弹出窗口和'formvalidation'库来验证和提交数据。（注意：这与jquery validate不是同一个库）。

以下是我试图完成的演示。

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

我得到了大部分代码，我能够显示模态窗口，传入数据和验证也能正常工作。问题是没有触发success.form.fv事件，对话框才关闭。

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

Answer 1

我能够通过添加排除的＆＃39;来解决问题。财产，如文件中所述。

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

表单验证jQuery插件success.form.fv事件无法正常工作

1 个答案: