Why this validation does not work: Visual Form Builder usage

I’ve got an issue :) And I’m trying to understand, why this issue occurs.. But i can’t figure out why it occurs. OK this is the problem, I’m using a form builder (in WP) called Visual Form Builder Pro and this plugin just works fine. But there seems not to be an option to allow the (website) user to duplicate a specific fieldset and get it validated.

OK this is what does work: The cloning of the fieldset (i know, it’s no beauty):

// Add a fieldset
$('.add-field').click(function() {
// Copy the above fieldset and transfer it after the first on
var cloned = $(fieldset).clone();
$(cloned).find('#add-extra').remove();
$(cloned).insertAfter(fieldset);

So the cloning works but when you try to validate the form (by just clicking submit) you see that all the fields are validated (right or wrong), but not those which I’ve cloned. And I can’t figure out why. The validation seems to be done through jQuery… Someone please gimme a hand with this?

I’m not sure, but you are not supposed to have two or more items with the same id… If you do, when you’ll try to select these items by id via jQuery you’ll only get one of the (I think it is the first…) I think that what you need is change the id’s after the clone… e.g. $(cloned).attr(id,$(cloned).attr(id)+’2′)…

Tips

What now? I have some ideas for you.

Go explore CodePen!

As a front end designer and developer, you should have an account on CodePen so you can save your snippets, present your ideas, and engage with other front end folk. I'd encourage you to go PRO as well, to unlock the full power of CodePen.

Get the newsletter!

You should sign up for the CSS-Tricks newsletter. It's a clean copy of all the blog posts each week, combined together, right to your inbox. If email isn't your thing, there is an RSS feed, iTunes, and lots of other ways to subscribe.

Listen to ShopTalk!

Subscribe to The Lodge!

The Lodge is a members-only, ad-free video learning area here on CSS-Tricks. Just like the free screencasts, but organized into four large complete series. Membership is also the #1 best way to support CSS-Tricks.

We can do the real footer now.

Site Links

Colophon

CSS-Tricks* is created, written by, and maintained by Chris Coyier. It is built on WordPress, hosted by Media Temple, and the assets are served by MaxCDN. The fonts are Source Sans and Source Code Pro. It is made possible by viewers like you who subscribe to The Lodge and through advertising for products and services I like.