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上找不到验证的具体案例

Answer 1

您不能这样做，在验证$(".popover").fancybox({内触发submitHandler: function ()，您必须单独运行fancybox和validation代码。

不需要初始化$(".fancybox").fancybox();
从fancybox

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

submitHandler: function ()

从表单提交按钮

class="popover"

href="#successMessage"

运行fancybox和validation代码分开
在$.post('/email.php', $('form').serialize());内处理Ajax方法submitHandler: function ()。

fancybox

并触发$(".fancybox").trigger('click');

下面的示例将告诉您如何在弹出窗口内触发fancybox和表单验证，以及验证是否有效处理Ajax方法和调用的位置。

＆＃13;

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

＆＃13;

<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>

＆＃13;

Fiddle

表单提交时验证和Fancybox弹出

1 个答案: