We have answer of your question!

100% solved queries, no empty question

0

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?

Answer


1


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/

Answer author Sparky

Tickanswer.com is providing the only single recommended solution of the question fancybox and jquery form validation under the categories i.e jquery-validate , fancybox , fancybox-2 , . Our team of experts filter the best solution for you.

Related Search Queries:


You may also add your answer

Thanks for contributing an answer to Tick Answer!