0

Onsubmit 我想触发 fancybox 弹出窗口

一旦表单被验证（使用JQUERY验证），我只需要显示fancybox弹出窗口

似乎只有在表格填写不正确时才会弹出fancybox弹出窗口！

http://gloss-hair.com/old/owl/OWLFORM.html

我不确定如何仅在验证表单后才加载 popup fancybox 函数：

  <script type="text/javascript">
$().ready(function() {
    // validate the competition form when it is submitted
    $("#ie9_competition").validate({
        errorPlacement: function (error, element) {   
            if ( element.is(":checkbox") ) {
                error.appendTo( element.closest('div') );
               }
            else { 
                error.insertAfter(element.parent().find("label"));           
                 }
            },
        rules: {            
            sEmail: {
                required: true,
                email: true
            },

        }
    });         
}); 


<script type="text/javascript">
    $(document).ready(function() {
        $(".fancybox4").fancybox({
            'hideOnContentClick': true
        });
    });
</script>
4

2 回答 2

2

jQuery Validation 插件让你定义 submitHandler 如果表单有效则执行：

submitHandler: function(form){
  form.submit(); // submit the form
  // code to show your fancybox here
}

您的 validate() 代码将如下所示：

$("#ie9_competition").validate({
 errorPlacement: function (error, element) {   
  if ( element.is(":checkbox") ) {
   error.appendTo( element.closest('div') );
  } else { 
   error.insertAfter(element.parent().find("label"));           
  }
 },
 rules: {            
  sEmail: {
   required: true,
   email: true
  }
 },
 submitHandler: function(form){
  form.submit(); // submit the form
  // code to show your fancybox here
 }
});

您可以在此处查看 validate() 方法的所有可用选项：http: //docs.jquery.com/Plugins/Validation/validate#toptions

于 2012-04-09T16:55:44.597 回答
1

像这样试试

$().ready(function() {
        // validate the competition form when it is submitted
        $("#ie9_competition").validate({
            errorPlacement: function (error, element) {   
                if ( element.is(":checkbox") ) {
                    error.appendTo( element.closest('div') );
                   }
                else { 
                    error.insertAfter(element.parent().find("label"));           
                     }
                },
            rules: {            
                sEmail: {
                    required: true,
                    email: true
                },

            },          
            submitHandler: function(form){

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

            }
        });         
    });

然后onsubmit从表单标签中删除事件。所以你的表单标签就像

<form id="ie9_competition" method="post">
于 2012-04-10T03:25:16.143 回答