形式验证jQuery插件Success.form.fv事件不起作用



我正在尝试构建一个动态弹出窗口,该弹出窗口允许用户在数据表中编辑数据而无需重定向页面。我正在将nodejs与jQuery"模态"库一起弹出和" 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-Zs]+$/,
                    message: 'The full name can only consist of alphabetical characters'
                }
              }
            },
            edited_filename: {
              validators: {
                notEmpty: {
                  message: 'Edited Filename is required'
                },
                regexp: {
                    regexp: /^[a-zA-Zs]+$/,
                    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');
        //});
      });
    });

我能够通过添加文档中解释的"排除"属性来解决问题。

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

相关内容

  • 没有找到相关文章

最新更新