表单提交时验证和 Fancybox 弹出窗口

Question

在具有这种动作的表单中：

<form action="email.php">

实际行为：

• 当用户单击提交时，会使用 jQuery validate 检查表单。
• 如果一切正常，提交数据，用户被发送到 email.php 页面。

期望的行为：

• 当用户点击提交时，
• 数据已检查
• 如果一切正常，提交数据并打开一个带有消息的弹出窗口（带有fancybox 或类似的）

点击提交按钮后如何处理？

单独验证是可以的，Fancybox 也是如此。 但是这两个一起不起作用。

$(document).ready(function() {
    $(".fancybox").fancybox(); // initializing
    $('#contactForm').validate({ 
        submitHandler: function (form) {

            $.post('/email.php', $('form').serialize());

            $(".popover").fancybox({
                    maxWidth    : 800,
                    maxHeight   : 600,
                    fitToView   : false,
                    width       : '70%',
                    height      : '50%',
                    autoSize    : false,
                    closeClick  : false, 
                    openEffect  : 'none',
                    closeEffect : 'none' 
            }); 

            jQuery('.popover').trigger('click'); 

        }
    });
});

HTML

<button type="submit" class="btn btn-block popover" href="#successMessage" >Submit</button>

PS : 我没有在 StackOverflow 上使用 validation 找到这个特定案例

Answer 1

你不能这样做，在验证submitHandler: function ()中触发$(".popover").fancybox({，你必须分别运行fancybox和validation代码。

• 不需要初始化$(".fancybox").fancybox();
• 从submitHandler: function () 中删除fancybox 触发器jQuery('.popover').trigger('click');
• 从表单提交按钮中删除 class="popover" 和 href="#successMessage"
• 分别运行fancybox 和validation 代码
• 处理Ajax方法$.post('/email.php', $('form').serialize());inside submitHandler: function ()。
• 并在 Ajax 成功调用 $(".fancybox").trigger('click'); 后触发 fancybox

以下示例将让您了解如何在弹出窗口中触发 fancybox 和表单验证，以及验证是否有效在哪里处理 Ajax 方法和调用。

$(document).ready(function () {
	// initializing
	$('.fancybox').fancybox({
		maxWidth: 800,
		maxHeight: 600,
		fitToView: false,
		width: '70%',
		height: '90%',
		autoSize: false,
		closeClick: false,
		openEffect: 'none',
		closeEffect: 'none'
	});
	$('#contactForm').validate({
		rules: {
			name: {
				required: true
			},
			email: {
				required: true,
				email: true
			}
		},
		messages: {
			name: {
				required: "Please enter your full name."
			},
			email: {
				required: "Please enter your email address."
			}
		},
		submitHandler: function (form) {
		   //Handle Ajax Method and success  / error here
			$(".fancybox").trigger('click');
		}
	});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.14.0/jquery.validate.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.css" />
//Contact Form with validation

<div class="centered-wrap">
	<form class="form-horizontal" role="form" id="contactForm">
		<div class="form-group">
			<label class="col-sm-2 control-label" for="email">Email</label>
			<div class="col-sm-10">
				<input type="email" class="form-control" name="email" id="email" placeholder="Email" />
			</div>
		</div>
		<div class="form-group">
			<label class="col-sm-2 control-label" for="name">Name</label>
			<div class="col-sm-10">
				<input type="text" class="form-control" id="name" name="name" placeholder="Name" />
			</div>
		</div>
		<div class="form-group">
			<div class="col-sm-offset-2 col-sm-10">
				<button type="submit" class="btn btn-default">Sign in</button>
			</div>
		</div>
	</form>
</div>
//Message inside FancyBox
<div class="fancybox" style="display: none;">Confirmation message </div>

Fiddle