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

debugcn 发表于 Dev

阿德里安·拉方（Adrien Lafond）

以这种动作的形式：

<form action="email.php">

实际行为：

当用户单击“提交”时，将使用jQuery validate来检查表单。
如果一切正常，那么将提交数据，并将用户发送到email.php页面。

所需行为：

当用户单击“提交”时，
数据检查
如果一切正常，请提交数据并打开带有消息的弹出窗口（带有fancybox之类的信息）

单击“提交”按钮后如何处理？

单独进行验证就可以了，Fancybox也可以。但是2一起不起作用。

$(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上没有通过验证找到这种特殊情况

希拉里

您不能这样做，触发$(".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在Ajax成功调用后触发$(".fancybox").trigger('click');

下面的示例将使您了解如何在弹出窗口中触发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>

小提琴

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。