fancybox a validácia formulára jquery - jquery-validate, fancybox, fancybox-2

Máte problém s fancybox a jQuery overiť plugin, keď je formulár vo fancybox kontajneri.

Skúmať (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>

súbor js:

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

Ako urobiť jQuery overovanie pluging pracovať v fancybox?

odpovede:

Urobte dve veci ...

1. Použi afterLoad Funkcia spätného volania FancyBox na inicializáciu .validate() ihneď po načítaní formulára.

2. Dajte obsah pre FancyBox do skrytého div namiesto vo vašom jQuery. Je to čistejšie.

Poznámka: Možno budete chcieť znova zvážiť použitie email pre name atribútov. To má potenciál spôsobiť veľký zmätok, pretože pravidlo je tiež nazývaný 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
}
}
});
}
});

});

Pracovné DEMO: http://jsfiddle.net/ZMEEW/