Search code examples
jquery-validatefancyboxfancybox-2

fancybox and jquery form validation


Have problem with fancybox and jquery validate plugin when form is in fancybox container.

For examle (inline): html:

<script>
$(document).ready(function(){  $.fancybox('
<form class="myform">
<input type="text" name="email" class="email" />

<input type="submit" value="submit" name="submit" />
</form>
');
})
</script>

js file:

$(".myform").validate(
          {
          rules: {
            email: "required",
            email: "email"
                 }
           }
        );

How to make jquery validation pluging to work in fancybox?


Solution

  • Do two things...

    1. Use the afterLoad FancyBox callback function to initialize .validate() immediately after the form is loaded.

    2. Put the content for FancyBox in a hidden div instead of in your jQuery. It's cleaner.

    Note: You may want to reconsider using email for the name attribute. It has potential to cause great confusion since the rule is also called email.

    HTML:

    <a id="test" href="#inline">Test</a>
    
    <div style="display:none" id="inline">
        <form class="myform">
            <input type="text" name="email" class="email" />
            <input type="submit" value="submit" name="submit" />
        </form>
    </div>
    

    jQuery:

    $(document).ready(function () {
    
        $('#test').fancybox({
            afterLoad: function() {
                $('.myform').validate({
                    // rules and options for validate plugin,
                    rules: {
                        email: {  // "email" is name of the field
                            required: true,
                            email: true // "email" is name of the rule
                        }
                    }
                });
            }
        });
    
    });
    

    Working DEMO: http://jsfiddle.net/ZMEEW/