时间戳

首页 > 解决方案 > 使用带有 jquery-validate 的 Fancybox - 确认框

jquery - 使用带有 jquery-validate 的 Fancybox - 确认框

问题描述

我真的很挣扎。

我想为我的雇主做的是提交一份经过验证的表格，问题是基于提交的字段一个弹出式表格（使用 fancybox 版本 3 - http://fancyapps.com/fancybox/3/）条件是当地点是苏格兰并且最终金额超过 4,550 英镑时（第二个选择框上的选项 2）。

我使用$(this).validate ()（因为页面上有多个表单）运行验证。然后我想控制submitHandler并根据条件运行一个fancybox，confirmation以便当单击出现在其中的按钮时，fb.box表单提交。

我觉得我没有传递一些变量或遗漏一些重要的东西。我知道还有其他一些方法可以实现这一点，但是由于使用 fancybox 的样式选项，这是首选方法，请帮助，我已经绞尽脑汁 2 天试图做到这一点。

我最后的手段是从验证表单中获取变量并将其传递到fancybox，然后从框中提交（不理想，但可能是唯一的方法）。如果您想查看表格，请访问：

https://ivapractice.co.uk

  $('form').each(function() {  
$(this).validate({
  rules:{
    location:"required",
    debtAmount:"required",
    incomeStatus:"required",
    livingStatus:"required",
    assets:"required",
    fullname:{
      required:true,
      minlength:3
    },
    phonenumber:{
      required:true,
      minlength:11,
      maxlength:11
    },
    email:{
      required:true,
      emailvalidate:true
    },
    gridCheck:"required"
  },
  messages:{
    location:"Please select what region you live in",
    debtAmount:"Please select your approximate debt level",
    incomeStatus:"How do you recieve your income",
    livingStatus:"What's your current living status",
    assets:"Please select an option",
    fullname:"Please enter you full name",
    phonenumber:"Please enter a valid phone number",
    email:"Please enter a valid e-mail address",
    gridCheck:"We require your consent to submit your enquiry"
  },
  submitHandler: function(form) {
    // some other code
    // maybe disabling submit button
    // then
    var location = $('[name=location]').val();
    var debtAmount = $('[name=debtAmount]').val();
    var incomeStatus = $('[name=incomeStatus]').val();
    var livingStatus = $('[name=livingStatus]').val();
    var assets = $('[name=assets]').val();
    if(location == 'Scotland'){
      $.fancybox.open({
        src  : 
        '<div class="container"><div class="row"><div class="col"><h1 class="text-center">Thanks for you Enquiry</h1></div></div><div class="row"><div class="col text-center><p>Based on the information you have submitted, an IVA may not be suiteable.</p><p>There are many ways in which we can still help and we work with a panel of debt advice companies that could stilll help.</p><p>Your data is important to us and we just want to maek sure you are happy for you to refer you detaisl for a more suitable soluiotion.<p></div></div><div class="row"><div class="col-md-6 col-sm-12"><button data-value="0" data-fancybox-close class="btn">I need a bit more time</button></div><div class="col-md-6 col-sm-12"><button data-value="1" data-fancybox-close class="btn">Sure that is ok</button></div></div></div>',
        type : 'inline',
        opts : {
          afterLoad: function( instance, current, e) {
            var button = e ? e.target || e.currentTarget : null;
            var value  = button ? $(button).data('value') : 0;
            if(value == 1){
              alert():
            }
          }
        }
      })
    }
    else {
      //$(form).submit();
    }
  }
});
}

标签： jqueryjquery-validatefancybox-3

解决方案

试试下面，

  1. 我添加了一个隐藏字段来识别用户是否点击了“确定没问题”。

<input type="hidden" value="0" name="is_validated" id="is_validated">

  1. 我已经更新了submitHandler下面的内容。

    submitHandler: function(form) { 

// some other code
// maybe disabling submit button
// then
var location = $('[name=location]').val();
var debtAmount = $('[name=debtAmount]').val();
var incomeStatus = $('[name=incomeStatus]').val();
var livingStatus = $('[name=livingStatus]').val();
var assets = $('[name=assets]').val();
if(location == 'Scotland' && $('#is_validated').val() != '1'){ // MODIFIED
  $.fancybox.open({
    src  : 
    '<div class="container"><div class="row"><div class="col"><h1 class="text-center">Thanks for you Enquiry</h1></div></div><div class="row"><div class="col text-center><p>Based on the information you have submitted, an IVA may not be suiteable.</p><p>There are many ways in which we can still help and we work with a panel of debt advice companies that could stilll help.</p><p>Your data is important to us and we just want to maek sure you are happy for you to refer you detaisl for a more suitable soluiotion.<p></div></div><div class="row"><div class="col-md-6 col-sm-12"><button data-value="0" class="btn data-fancybox-click">I need a bit more time</button></div><div class="col-md-6 col-sm-12"><button data-value="1" class="btn data-fancybox-click">Sure that is ok</button></div></div></div>', // MODIFIED
    type : 'inline',
    opts : {
      afterLoad: function( instance, current, e) {  // MODIFIED THIS FUNCTION
        $('body').find('.data-fancybox-click').off('click').on('click', function(e){
         var value = $(this).data("value");
         if(value == 1){
            $('#is_validated').val('1');
            $('#landingform button[type="submit"]').trigger('click');
            $.fancybox.close();

          }else{
            $.fancybox.close();
            $('#is_validated').val('0');
          }
        });
      }
    }
  })
}
else {
  $(form).submit();
}
}

data-fancybox-close从花式框中的两个按钮中删除了属性并添加了 class data-fancybox-click，然后为此按钮添加了一个点击事件并 is_validated相应地更改了 的值。如果用户单击该按钮Sure that is ok，则将is_validated值设置为1并再次触发表单提交单击。

仅在以下情况下才会显示精美的框(location == 'Scotland' && $('#is_validated').val() != '1')

推荐阅读