Question

Validating 3 email fields

Forms

Updated October 13, 2020

asked on October 13, 2020

Hi All,

I have 3 emails fields total. The first two fields are the customer's email addresses, a main email and an alternate. The third field is the email of an internal staff member. There are too many staff members to reasonably create a drop down selection field. I need to have the form validate that the staff member's email does not match the customer's email addresses.

I'm already using a CSS class on the customer's emails to make them appear in a line. I added a CSS class to the third field. I tried using the JavaScript shown in the help manual, but it doesn't work. I'm not knowledgeable enough in Java to know what's wrong with it and I suspect it's because I have 3 fields and not 2.

If you know how to make this work, I'd be really grateful. Our customers are entering their own emails in the staff member email field and it's creating extra work for us.

Thanks,

Brandi

0 0

Answer

SELECTED ANSWER

replied on October 13, 2020

Assuming you have the following classes .employee-email,.customer-main-email, .customer-alt-email on each of the email inputs you can try the code below:

I replace the css classes because out of context I had no idea what fields they were referring to. So the code below should check to see if the employee email field matches the values found in either the customer main or alt emails, if it finds a match it will disable the submit and insert some warning text after the employee email field.

A key thing to notice about the code is that it will only run when the employee email field is changes or changes focus. So if the customer emails haven't been filled in before the employee's email then the check will never find a match. I recommend that you try the code below and test if it works as expected. If so I would encourage you, as an exercise, to try and implement something that will check the emails when any of the three changes.

$(document).ready(function () {
  $('.employee-email').on('blur input', function () {
      if ($('.employee-email input').val() === $('.customer-main-email input').val() || 
          $('.employee-email input').val() === $('.customer-alt-email 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('.employee-email');
            }
      }
      else
          $('.warningText').remove();
      $('.Submit').removeAttr('disabled');
  });
});

Hope this helps.

1 0

View 5 previous replies

replied on October 13, 2020

I think your code will work, I haven't tested it yet because I have another question. Currently the customer's main and alternative email have the same CSS class so that I can make them appear on one line. If I give them different CSS classes, how do I make them still appear on the same line? Can they have two CSS classes each?

0 0

replied on October 13, 2020 • Show version history

What do you mean by "appear on one line"? HTML elements can have as many CSS classes as you'd like. The reason I gave them a unique class is so that jQuery will return a single element back. Otherwise it will return a collection and you'll need to iterate over the elements in that collection.

You can accomplish your goal in either fashion, but the approach (code) will be different for each.

0 0

replied on October 13, 2020

These are how the fields appear on my form. The staff member's email appears farther down in the form. It sounds like it will work. I'll test it out. I really appreciate your help, Francisco!

0 0

replied on October 13, 2020

Your welcome Brandi, however do keep in mind that this solution is not something that I would put into a production form. If the customer email are not both filled in first the employee email check will not work as expected.

I would highly encourage you to review the code, there should be enough information there for you to write something that will run the check when any of the email fields change.

If you get stuck show me what you got and I'd be happy to help you get to a more robust solution.

0 0

replied on October 13, 2020

Since the fields are required and are at the top of the form, I think this code is actually fine for my use as is. Our forms are fairly straight forward (i.e. complete the required fields and submit).

The part I'm not sure about now is how to make the error message appear in red font. I assume it's something like color: red, but as I said, I really don't know Java. Learning Java is on my to-do list, right after everything else that's more important.

0 0

replied on October 13, 2020

.warningText {
  color: red;
}

You are correct you can add the above to the CSS section and it should work.

0 0

replied on October 13, 2020

I was trying to put it in the JavaScript. Thank you for teaching me today.

One more issue with this code... it doesn't actually hide the submit button. I looked through the documentation and it shows that the code below should hide the submit button, but it doesn't either. Any ideas?

 $('.Submit').hide();

0 0

replied on October 13, 2020 • Show version history

The original code is not meant to hide, but to disable the button (meaning it cannot be clicked). You can use the hide() and show() functions to hide and show the button respectively. The code below utilizes those functions:

$(document).ready(function () {
  $('.employee-email').on('blur input', function () {
      if ($('.employee-email input').val() === $('.customer-main-email input').val() || 
          $('.employee-email input').val() === $('.customer-alt-email input').val()) {
            $('.Submit').hide();
            if ($('.warningText').length > 0 ){
                return; 
            } else {
                $('<p class="warningText">The email addresses you entered do not match.</p>').insertAfter('.employee-email');
            }
      }
      else
          $('.warningText').remove();
      $('.Submit').show();
  });
});

1 0

Replies

replied on October 13, 2020

The code snippet you're referring to is not showing up, you may want to edit the post. However, you said there are too many staff member to create an email dropdown, if your concern is for the submitter to quickly find a staff email address if you have the emails in an SQL database you can use a lookup rule to populate them. You can even use a 3rd party library like https://select2.org/ to very easily add searchability functionality to the dropdown as you see on most modern sites.

I'm sure you're already aware, but if this is an internal form you already have access to the submitter's full name, username, and email. Hope some of this helps, if you get your code snippet up I'd be happy to take a look.

0 0

replied on October 13, 2020

Sorry, I didn't post the script since it's just the default one in the help manual. Not all staff members are Forms users, so I can't use that option. The Customer is external as well, so I can't use any kind of lookup rule either.

Below is the code from the help manual. I changed email and confirm to the CSS classes I created, but nothing happens.

$(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');
    });
});

0 0

You are not allowed to follow up in this post.

Question

Question

Validating 3 email fields

Answer

Replies

Sign in to reply to this post.