Question

Compare multiple pairs of email addresses

Forms

Updated July 31

asked on March 1, 2021

I am hoping that someone is much better at javascript than I am, and can help me. I need to compare 2 different sets of email addresses on a form. For each pair, if they do not match, I need an error message to display, and for the user to not be able to submit the form. I found code on an old post that shows how to do this for one set of email addresses.

$(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"><font color="red">The email addresses you entered do not match.</p>').insertAfter('.confirm');
            }
        }
        else
            $('.warningText').remove();


    })
});

I tried modifying it to use with 2 sets of email addresses as such:

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

if ($('.email input').val() != $('.confirm input').val()) {
$('.Submit').hide();
if ($('.warningText').length > 0 || $('.confirm input').val() == '') { return; }
else {
$('The email addresses you entered do not match.').insertAfter('.confirm');
}
}
if ($('.email2 input').val() != $('.confirm2 input').val()) {
$('.Submit').hide();
if ($('.warningText2').length > 0 || $('.confirm2 input').val() == '') { return; }
else {
$('The email addresses you entered do not match.').insertAfter('.confirm2');
}
}

else
$('.warningText2').remove();
$('.warningText').remove();
$('.Submit').show();

})
})

Unfortunately, it only shows the error on the first pair after all 4 entries are filled in. Also, it won't show an error on the second pair, unless the first pair matches. Plus, when the first set is good the Submit button shows even if the second pair doesn't match.

I would appreciate any help that I can get on this.

0 0

Answer

SELECTED ANSWER

replied on March 1, 2021 • Show version history

A better approach to this would be to leverage the Parsley validation library Forms uses. By using a parsley validator, not only will it handle placement of the error message, but it will also behave like any of the out-of-the-box errors, including preventing submission of the form meaning you don't need to rely on hiding the submit button.

In this example, I have separate classes for the "main" input and "confirmation" inputs, and I only run validation on the second input since you'll get the error regardless of which one is incorrect.

So the validator can be reused instead of creating a separate validator for each of the "pairs" I also added a class to identify the two distinct pairs "email1" and "email2"

Fields and Classes:

JavaScript:

$(document).ready(function(){
  // custom validator for email confirmation
  window.Parsley.addValidator('emailconfirmation', {
    validateString: function(value, requirement, field) {
      // check which pair the email belongs to by checking the parent element
      var pair = field.$element.parents('li').hasClass('email1') ? '.email1' : '.email2';
      
      // find the main input and confirmation input
      var email = $(pair + '.emailAddress input').val().toLowerCase();
      var confirm = $(pair + '.emailConfirm input').val().toLowerCase();
      
      return (email == confirm || email == '' || confirm == '');
    },
    messages: {
      en: 'Email addresses do not match.',
    }
  });
  
  // assign validator to email fields
  $('.emailConfirm input').attr('data-parsley-emailconfirmation','');
  
  // if you want to re-validate if they double-back and change the main input
  $('.emailAddress input').on('change',function(){
    var pair = $(this).parents('li').hasClass('email1') ? '.email1' : '.email2';
    var confirm = $(pair + '.emailConfirm input');
    
    // revalidate confirm email if not empty
    if(confirm.val() != '') confirm.parsley().validate();
  });
});

The Results:

2 0

Replies

replied on March 1, 2021

In the coming Forms 11 which will be released soon, the E-mail field in new form designer supports confirmation out-of-box.

3 0

View 4 previous replies

replied on March 2, 2021

That's awesome news lol. By any chance does it allow you to place the two fields side-by-side rather than one on top of the other without using custom CSS?

If not, maybe consider adding a dropdown similar to the one for checkboxes and radio buttons that lets you decide between side-by-side or what's in the screenshot.

0 0

replied on March 3, 2021

@████████, it only supports place the two email inputs in two rows currently, I will file an enhancement for allowing placing them side by side.

2 0

replied on March 3, 2021

Thanks!

0 0

replied on December 6, 2022 • Show version history

We are using Laserfiche Forms Professional Version 11.0.2106.10367. I do not see an out-of-the box solution for dual email entry as described above as an available feature in v 11. Is there something necessary to enable this feature? See screenshot below.

p.s. I have used Javascript code to achieve this, would just like to know why the function does not seem to be available to us in v 11.

0 0

replied on December 8, 2022

It is supported with the new form designer

0 0

replied on March 12, 2023

@████████, with Forms 11 Update 3, you can specify side by side layout for the email confirmation.

0 0

replied on March 15, 2023

@████████ Thanks for the update. Unfortunately, we can't migrate to the modern designer because most of our forms rely on JavaScript functionality that can't be replicated with the new LFForms object.

1 0

replied on March 1, 2021 • Show version history

I think the issue is your if...else statements - you are asking if the first set matches, then you are asking if the second set matches, and then you have the else criteria to remove the warnings - but that else statement if only tied to the second if statement, not the first. So you could actually enter all 4 values with the proper matches, and then go back and change one of the first two values, and it would still not show the warnings or hide the submit button.

Here's how I would actually do it...

Make a function that can be run any time you want to compare the email fields - at the start of the function, always remove the submit button and the warning messages - so we have a clean state. Then check for the 1st error, and apply the warning and hide the submit button if error exists. Then check for the 2nd error, and apply the warning and hide the submit button if the error exists. If neither error was found, you remain without any warning message and a visible submit button. Then just call that function any time any of the indicated fields are blurred (change would also work instead of blur). Also, I have it checking if the fields are blank and not displaying the error if that is the case (because the required field errors will work here instead - if you are not making these required fields, you'll want to tweak the if statements on lines 8 and 12).

Here's the code:

$(document).ready(function () {

  function compareEmails()
  {
    $('.Submit').show();
    $('.warningText').remove();
    $('.warningText2').remove();
    if ($('.email input').val() != $('.confirm input').val() && $('.email input').val() != '' && $('.confirm input').val() != '') {
      $('<p class="warningText"><font color="red">The email addresses you entered do not match.</p>').insertAfter('.confirm');
      $('.Submit').hide();
    }
    if ($('.email2 input').val() != $('.confirm2 input').val() && $('.email2 input').val() != '' && $('.confirm2 input').val() != '') {
      $('<p class="warningText"><font color="red">The email addresses you entered do not match.</p>').insertAfter('.confirm2');
      $('.Submit').hide();
    }
  }
  
  $('.email input').blur(compareEmails);
  $('.confirm input').blur(compareEmails);
  $('.email2 input').blur(compareEmails);
  $('.confirm2 input').blur(compareEmails);

});

1 0

replied on March 1, 2021

You should totally go with @████████'s suggestion over mine - I took it from a standpoint of tweaking your script to make it work - he took it from a standpoint of making it work better.

Adding the Parsley validation through the Javascript can take a little bit to wrap your brain around at first, but once you get it going the user experience is going to be much better every time.

0 0

replied on July 31

I think i will go with your solution Matthew it seems to be straight forward and easy to implement

0 0

replied on July 31

3 1/2 years later and Jason’s solution is still the better solution. Really, it is.

And this is just for the Classic Designer. Now we have the Modern Designer, which has this functionality built-in.

1 0

replied on March 2, 2021

Thank you all for your help. With this answered, I am able to finish the form with the necessary validation. It's also nice to know this is coming in ver 11

1 0

You are not allowed to follow up in this post.

Question

Question

Compare multiple pairs of email addresses

Answer

Replies

Sign in to reply to this post.