• Home
  • Blog
  • Documentation
  • FAQ
    • Pre-Sales Questions
  • Sign Up
  • Log Out
  • Get Easy Forms
  • Home
  • Blog
  • Documentation
  • FAQ
    • Pre-Sales Questions
  • Sign Up
  • Log Out
  • Get Easy Forms
home/Knowledge Base/Advanced Techniques
Popular Search:Getting Started

How to Compare two email fields and Submit only if they are the same

70 views June 1, 2020 admin 2

How do I setup a form to validate a user’s email address by having the user type in his/her address twice, then having the form compare the fields to see if the two entries match?

This can easily be done using conditional logic, which also gives you incredible flexibility not only to display an error message, but to turn other fields on or off, navigate to other pages on the form, show different thank you messages, or redirections, and much more.

We are going to start this tutorial showing you how to compare two emails and set the result of the comparison in a third field. Just to see how it works.

Build your Form

Go to the Form Builder and add 4 fields:

1. Your Email (Email Field)
2. Confirm Your Email (Email Field)
3. Result of the comparison (Text Area)
4. Submit (Button)

You should see something like this:

Confirm email

Set Up your Conditional Logic

To achieve our first objective (Compare two email fields), Go to the Form’s Conditional Rules to create your first rule.

1. In Conditions, we are gong to choose “All” and add two conditions:

a. When “Your Email Address” is present
b. When “Confirm Email Address” is present

2. In Actions, we are going to evaluate a formula to compare texts in a natural way, by using the compareNatural(val1, val2) function. This function receives two values, in this case the fields to compare.

a. Select Evaluate
b. In Formula enter compareNatura()
c. Between “()”, click “{“ to display the auto-suggest tool and choose the first email field
d. Add a comma to separate both values, and click “{“ to display the Suggestions tool again to choose the second email field.
e. Finally, set the result to the text area field.

The Auto-Suggest tool looks like this:

Auto-Suggest Tool with Conditional Rules

Now we are going to see this configuration in action.

Confirm Email

See your Form in Action

Go to Forms -> Actions -> Publish & Share -> Share Form Link -> Go

When you start filling the second email field, the Result field will show a number.

Compare Two Email Fields

The result: 1 when First Field is bigger than the Second Field, -1 when First Field is lower than Second Field, and 0 when both fields are equal.

Ok, we have finished the explanation of this advanced feature. Now, we are going to configure some actions according to the result.

Use a Hidden Field to store the result

As the result of the comparison is not friendly for our end users, we can use it only for technical purpose. So, we are going to remove the Text Area, and add a Hidden Field with the same label.

Confirm Email

As we have removed the text area field, our conditional rule will show an empty field.

Confirm Email

We need to select the added hidden field (Label: Result of the comparison) and Save.

Enable / Disable the Submit Button

To achieve our second objective (Submit only if they are the same) we are going to add a new conditional rule. This rule must be placed below the comparison rule (Remember, order is important in conditional logic).

So, click Add rule and add the following condition and action:

  • When “Result of comparison” is 0
  • Then Enable Field “Submit”

That’s it.

Confirm Email

Now your form should have this behavior.

Compare Two Email Field - Disable Button

Show an alert message

Now we are going to display an alert message to indicate our users if they have entered their email correctly.

Go to the Form Builder and follow these steps:

  1. Mark both email fields as required.
  2. In “Confirm Your Email Address” add a Container CSS Class: confirm-email and enter the following Help Text:
    <span class=”text-danger”>Please enter the same value again</span>
  3. Save your form

Confirm Email

Finally, go to Conditional Rules and add a new rule:

When “Your Email Address” is present (has a value)
And “Result of comparison” is not 0
Then Show the Element .confirm-email p

Confirm Email

Note: An Element should be a jQuery selector. In this case, the element is the paragraph inside the HTML element with the CSS Class confirm-email.

Now your form should have this behavior.

Compare Two Email Fields - Disable Button and Show Alert Message

Pay attention as the alert message is only shown when the user has filled in the first field, but disappears when the second field matches the first one. And the behavior of the button remains.

Was this helpful?

2 Yes  No
Related Articles
  • Create Users that Can Only Submit Forms
  • How To Calculate Age From Date Of Birth
  • Calculate the Number of Days between Two Dates
  • Create Users that Only Can Manage Form Submissions of Shared Forms
  • Reject Email Addresses From Specific Domains
  • How to Display Radio Buttons as Buttons
Leave A Comment Cancel reply

You must be logged in to post a comment.

Advanced Techniques
  • How to Compare two email fields and Submit only if they are the same
  • Create Users that Can Only Submit Forms
  • How To Calculate Age From Date Of Birth
  • Calculate the Number of Days between Two Dates
  • Create Users that Only Can Manage Form Submissions of Shared Forms
  • Reject Email Addresses From Specific Domains
View All 16  
Popular Articles
  • How to enable / disable DEBUG mode
  • How to update Form Stats from the command line
  • How to RTL (right-to-left) a Form?
  • How to Remove the Default Choice from a Select List Field
  • How to Insert an Image into a Notification or Confirmation Email
KB Categories
  • Add-Ons
  • Advanced Techniques
  • Common Issues & Troubleshooting
  • Developers "How To's"
  • How To
About Easy Forms

With Easy Forms you can create unlimited web forms and most importantly the complete management of them without paying monthly fees

Resources
  • Knowledge Base
  • Documentation
  • Pre-sales Questions
  • Blog
Useful Help Links
  • Get Easy Forms
  • Live Demo
  • License Terms
  • Contact Us
Frequent Visit Links
  • Pre-Sales Questions
  • System Requirements
  • Installing Easy Forms
  • Upgrading Easy Forms
  • Privacy Policy
  • © 2015 - 2020 Baluart EIRL. All Rights Reserved.