jQuery验证表单 - onsubmit fire fancybox窗口

时间:2012-04-09 16:44:40

标签: jquery-validate fancybox onsubmit

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>

2 个答案:

答案 0 :(得分: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

答案 1 :(得分: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">