Question

Onsubmit我想解雇fancybox popup

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

只有在未正确填写表单时才会弹出fancybox弹出窗口！

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

我不确定如何在验证表单后加载弹出式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>

Answer 1

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

Answer 2

试试这个

$().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">

jQuery验证表单 - onsubmit fire fancybox窗口

2 个答案: