我正在尝试构建一个动态弹出窗口,该弹出窗口允许用户在数据表中编辑数据而无需重定向页面。我正在将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/