Grow your CSS skills. Land your dream job.

Why this validation does not work: Visual Form Builder usage

  • # March 16, 2012 at 6:19 pm

    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
    # March 16, 2012 at 7:19 pm

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

    # March 16, 2012 at 7:57 pm

    Looks like you need to throw in a check to see it has already been clicked

    Also you have an open anchor on your page which will wreak havoc as well

    http://html5.validator.nu/?doc=http%3A%2F%2Fklanten.yellowduckwebdesign.nl%2Fpapenheuvel%2Freserveren%2F

    # March 17, 2012 at 6:04 am

    @xpy: i’m giving it a try!

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

    # March 17, 2012 at 7:06 am

    @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
    # March 17, 2012 at 2:52 pm

    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…

    # March 24, 2012 at 7:35 am

    @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.

    # April 7, 2013 at 9:00 pm

    You might also Find the Following link useful

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

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".