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

Question

在具有此类操作的表单中：

<form action="email.php">

实际行为：

当用户单击提交时，将使用 jQuery 验证检查表单。
如果一切正常，提交数据，用户被发送到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 ：我没有在 Whosebug

上用 validation 找到这个具体案例

Answer 1

你不能这样做，触发 $(".popover").fancybox({ 内部验证 submitHandler: function ()，你必须运行 fancybox 和 validation 分开编码。

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

fancybox

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

从表单提交按钮中删除 class="popover" 和 href="#successMessage"
运行 fancybox 和 validation 代码分开
在 submitHandler: function ().

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

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

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

Validation and Fancybox popup upon Form Submit

validation

jquery

fancybox