can i have a verify field

  • Profile Image
    mathquiz
    Asked on January 30, 2012 at 07:45 PM

    I want to have it so the user would be required to type the same thing into two fields.

    Such as an email verify field.

    like:

    email: blank@blank.com

    Retype email: blank@blank.com 

    is there a condition i can set up to make sure the two match.

  • Profile Image
    abajan
    Answered on January 30, 2012 at 09:19 PM

    This feature has been requested but is not yet available in the form builder. However, if the form's full source is embedded into a web page, JavaScript can be used to accomplish the task, as illustrated in this demo form.

    Here's how to make such a form:

    1. Use the form builder to construct the form containing the two fields to be compared. (As in the demo, we will be comparing two email addresses)

    2. Label the second email field something like: "Type e-mail again (for verification)" and save the form

    3. While on the Setup & Embed tab, click "Embed Form" > Source and copy the code provided by the wizard to your clipboard

    4. Paste the code into the source of the web page at the position where you want the form to appear

    5. Search for the input tag of the first email field and note its ID

    6. Search for the input tag of the second email field, note its ID and add the following JavaScript event to that tag: onblur="compareEntries();"

    7. Just before the closing body tag of the page, insert this block of JavaScript and edit it in the following manner:

    Change input_17 to the ID noted in Step 6.
    Change input_4 to the ID noted in Step 5.
    Change both instances of label_17 to the ID of the second email field's label. (The digits at the end will match those in the input's ID. For example, if the input's ID is input_5, the label's ID will be label_5.)
    If necessary, change both instances of id_2 to the ID of the submit button.*
    Save the changes.

    That's about it. If you need clarification on anything, please let us know. (Viewing the source of the demo form would help to clarify what should be done.)


    * In a single paged form, it's unlikely that you would need to change id_2 because the submit button is normally the second element inserted into a JotForm form and as such gets the ID of id_2. However, in multi-paged forms you would want to hide the "Next" button on the page containing the two email fields instead of the submit button, unless the email fields were on the last page.

  • Profile Image
    abajan
    Answered on January 30, 2012 at 09:25 PM

    I forgot to mention that both email fields should be set to Required before you get the code from the Embed Form Wizard.

  • Profile Image
    mathquiz
    Answered on January 30, 2012 at 11:57 PM

    Thanks

  • Profile Image
    abajan
    Answered on January 31, 2012 at 04:08 AM

    You're welcome.

  • Profile Image
    Art Upton
    Answered on March 07, 2012 at 12:22 PM

    You have a slight syntax error in your code, above (step #7). Your code in the include is:

    document.getElementById("label_17").innerHTML="<span style="color:red; font-weight:bold;">Oops! Let's try that again...</span><span class="form-required">*</span>";

    and the code in your working example is

    document.getElementById("label_17").innerHTML="<span style='color:red; font-weight:bold;'>Oops! Let's try that again...</span><span class='form-required'>*</span>";

    Note in the incorrect code there are embedded double quote characters in the assignment
    for innerHTML.

    Once this was fixed it worked fine. BTW, we used Firebug in Firefox to find the problem.

    Thanks for your code example, it was most useful.

  • Profile Image
    abajan
    Answered on March 07, 2012 at 12:33 PM

    Good catch, Art!

    By the way, you'll both be happy to know that it's now possible to include a confirmation field (currently only for email addresses) via the form builder. (For details, please see emrew86's and mliz's posts in this thread.)


    Cheers