Question

Confirming email address??

Forms

Updated January 4, 2022

asked on January 2, 2014

Is there a way in Forms to force a users to confirm their email address before sending? In other words, we want them to fill out an email address to get a copy of their form, however, to ensure they've typed the proper address, we would like them to enter it twice. I know I can create a two fields to have them type into, but is there a way to have it error if the fields don't match?

0 0

Answer

APPROVED ANSWER

replied on January 2, 2014 • Show version history

Because this goes beyond what field rules can do, the best way to do it is with JavaScript. Here's an example, where I have two email fields (one given the email class, the other given the confirm class). The code displays an error message if the fields do not match and disables the submit button.


$(document).ready(function () {
    $('.email, .confirm').on('blur input', function () {

        if ($('.email input').val() != $('.confirm input').val()) {
            $('.Submit').attr("disabled", "disabled");
            if ($('.warningText').length > 0) { return; }
            else {
                $('<p class="warningText">The email addresses you entered do not match.</p>').insertAfter('.confirm');
            }
        }
        else
            $('.warningText').remove();
        $('.Submit').removeAttr('disabled');

    })
})

As a note, this code will work for one pair of email fields. If you have multiple pairs, you'll want to use different pairs of classes (like email2 and confirm2) and slightly modify the code to handle those classes in addition to the ones shown above.

1 0

replied on April 17, 2017

Is there any way to color the warning text in red? A lot of people don't seem to notice the warning text and can't figure out what the issue is.

0 0

replied on June 4, 2019

has anyone figured out Bens question?

0 0

replied on June 4, 2019

I figured it out!

/* Email Confirm */
  $(document).ready(function () {
    $('.email, .confirm').on('blur input', function () {
        if ($('.email input').val() != $('.confirm input').val()) {
            $('.Submit').attr("disabled", "disabled");
            if ($('.warningText').length > 0 || $('.confirm input').val() == ''){
                return; 
            } else {
                $('<p class="warningText"><font color="red">The email addresses you entered do not match.</font></p>').insertAfter('.confirm');
            }
        }
        else
            $('.warningText').remove();
        $('.Submit').removeAttr('disabled');
    });
});

0 0

Replies

replied on January 2, 2014

Eric,

Is there a way with the code above to NOT have the error displayed until after they type into the confirm email field because as of right now, as soon as I start typing an email I get the error until I retype into the Confirm field.? Also, the Submit button is not being disabled when not matching.

0 0

replied on January 2, 2014

Here's the adjusted code for what you're asking for.

$(document).ready(function () {
    $('.email, .confirm').on('blur input', function () {

        if ($('.email input').val() != $('.confirm input').val()) {
            $('.Submit').attr("disabled", "disabled");
            if ($('.warningText').length > 0 || $('.confirm input').val() == '') { return; }
            else {
                $('<p class="warningText">The email addresses you entered do not match.</p>').insertAfter('.confirm');
            }
        }
        else
            $('.warningText').remove();
        $('.Submit').removeAttr('disabled');

    })
})

The submit button not being disabled might happen if the user is adding documents via a file upload field. That's the only case I'm aware of where the submit button gets re-enabled. What else is going on on the form?

As a workaround, you could hide the submit button until the user fixes the error. That'd look like this:

$(document).ready(function () {
    $('.email, .confirm').on('blur input', function () {

        if ($('.email input').val() != $('.confirm input').val()) {
            $('.Submit').hide();
            if ($('.warningText').length > 0 || $('.confirm input').val() == '') { return; }
            else {
                $('<p class="warningText">The email addresses you entered do not match.</p>').insertAfter('.confirm');
            }
        }
        else
            $('.warningText').remove();
        $('.Submit').show();

    })
})

4 0

replied on January 2, 2014

Can you not use Forms 9.1 to set a hidden field to be the users email address? It would autofill and you would not need to worry (or some variation of this)

0 0

replied on January 2, 2014

Kenneth, Not sure I understand what you're saying? Why would I want an email address to autofill as the whole point is to make sure they've typed it in correctly? If it autofills...won't it autofill the incorrect email?

0 0

replied on January 2, 2014

That would work for users that logged in to Forms to complete the form, but wouldn't work for public users.

0 0

replied on January 2, 2014

Eric,

The submit button is actually working...we thought it would be hidden "being disabled" but realized you just can't click on it. That works, so the only other thing was having the Error display "after" they enter into the Confirmation Email field.

0 0

replied on January 3, 2014

The code in my reply to you above should resolve that issue.

0 0

replied on January 4, 2022

Hi Eric,

I'm attempting to use the code you used above but I get the warning message as soon as I start to type in the confirmation email. Shouldn't the warning come up after the confirmation email is typed in?

0 0

You are not allowed to follow up in this post.

Question

Question

Confirming email address??

Answer

Replies

Sign in to reply to this post.