Email Confirmation Fields

Note: This page applies primarily to the classic form designer.

It is common to require users to enter their email address twice to minimize the chance of a mistake. If the two fields do not match, a warning displays to ask the user to correct the inputs. You can create an email confirmation field by following these steps.

1. Create two email fields on the Layout page of the form designer.
2. Assign the custom class email to the first email field.
3. Assign the custom class confirm to the second email field.
4. Paste the following code in the JavaScript area of the CSS and JavaScript page, replacing the warning text with your own choice of warning text:

   $(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 code works as follows:

• After the document loads, the browser watches for the user to change focus away from the input boxes of either of the two email fields.
• When a change of focus happens, the code compares the values in both input boxes. If the values do not match, then:
  • The Submit button on the form is disabled.
  • If the warning text already exists or if the user has not entered anything in the second email field yet, nothing happens.
  • If neither of the above two conditions holds, a warning message is displayed.
• If the values in the two fields match when a change of focus happens, the warning message is removed, and the Submit button is enabled again.