Why this validation does not work: Visual Form Builder usage

[Vermaas]

Hi all,

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):

$(function() {

/*

Adding an extra fieldset

*/

// The variables

var link = '
Voeg nog een huisdier toe.
';

var fieldset = $('.uw-huisdier');



// Add the link to the fieldset

$(link).appendTo(fieldset);



// 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);



// Make sure the link will die

return false;

});

});

Link to the website: link. And click on “Voeg nog een huisdier toe”.

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?

Thanks!

[xpy]

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′)…

[Vermaas]

@xpy: i’m giving it a try!

@karlpcrowley: thanks for pointing it out! Had to use get_the_excerpt() instead of using the_excerpt!

[Vermaas]

@xpy: you were right =D I’ve modified it to this:

$(function() {

/*

Adding an extra fieldset

*/

// The variables

var link = '
Voeg nog een huisdier toe.
';

var fieldset = $('.uw-huisdier');



// Add the link to the fieldset

$(link).appendTo(fieldset);



// Add a fieldset

$('.add-field').click(function() {

// Count the clones

var num = $('.fieldset').length;

var newnum = new Number( num + 1);



// Copy the above fieldset and transfer it after the first on

var newElem = $(fieldset).clone();



// Find, remove and rename

$(newElem).find('#add-extra').remove();

var inputField = $(newElem).find('input');



$(inputField).each(function() {

var randstring = (Math.floor((Math.random() * 100)) % 94) + 33;



$(this).removeAttr('id').attr('id', 'newelement-' + randstring);

$(this).removeAttr('name').attr('name', 'newname-' + randstring);

});



// Insert the new modified row

$(newElem).insertAfter(fieldset);



// Make sure the link will die

return false;

});

});

and it seems to work :)! Well the form validation works, but not the email :( It seems that the plugin uses the database to see which field has to be send by email..

I might modify the plugin for this part…

[xpy]

Actually I think you just may include the two extra fields by default and keep them hidden, then if the user presses the button, just show them… That’ll do the trick I think…

[Vermaas]

@xpy: This wasn’t an option, because the users could add “unlimited” (in this case) animals to the form. So this was the most practical and useful solution.

[cloc562oc]

You might also Find the Following link useful

Web Design La Habra | Visual Form Builder Hide Fieldset Line Break And Change Look

[Author]

Posts