Detect duplication of values of input fields

Question

I have a big html form with multiple email fields. What I want to do is make sure the user can't enter the same email in more than one field.

I have managed to detect duplication successfully by defining an array where each email value the user inputs is pushed to the array and that's where the comparison happens.

the problem happens when after detecting duplication I delete the value from the input field but the value still exists in the array so my function still returns that there is a duplicate value.

here is my function code:

var filledEmail = [];
var allEmailFields = $("form input[type='email']");

function checkIfArrayIsUnique(myArray) {
  return myArray.length === new Set(myArray).size;
}

function addToEmails() {
  allEmailFields = $("form input[type='email']");
  filledEmail = [];
  allEmailFields.each(function(){
    var currentEmail = $(this);
    currentEmail.bind('change',function() {
      console.log("email value changed");
      filledEmail.push(currentEmail.val());
      console.log(filledEmail);
      if (checkIfArrayIsUnique(filledEmail) == true) {
        console.log("emails unique")
      }
      else {
        console.log("emails not unique");
      }
    })

  });
}

Any help would be so much appreciated.

If you can use ES5+ have a look at this [answer](https://stackoverflow.com/a/14438954/4202224) — empiric, May 12 '20 at 13:04

EugenSunic · Accepted Answer · 2020-05-15T19:34:14.950

1

This is how you could do it:

Attach change event listeners to each of your elements and check if the entered value exists. If it does not exist add it to your filledEmail array otherwise do nothing.

You will see that if you type the same name in different input element boxes it will not be added, hence will not appear as the output in the console

var filledEmail = [];

document.querySelectorAll("input[type='email']").forEach((mailField,i) => {
  mailField.addEventListener("change", e => {
    const email = e.target.value;
    const hasMail = filledEmail.find(x => x === email);
    if (!hasMail) {
      filledEmail = filledEmail.filter((x, j)=> j!==i);
      filledEmail.push(email);
    }
    console.log('filled mails without duplicates', filledEmail)
  });
});

<input type="email" />
<input type="email" />
<input type="email" />
<input type="email" />
<input type="email" />

edited May 15 '20 at 19:34

answered May 12 '20 at 13:35

EugenSunic

13,162
13
64
86

Thank You so much! That's just what I needed – Lina Basuni May 12 '20 at 14:21
That will keep valid unique values that no longer exist in the array, after changing one input from a valid entry to another – Lapskaus May 12 '20 at 14:32
Do you have a solution to that? – Lina Basuni May 12 '20 at 14:39
hey @EugenSunic shouldn't it be : filledEmail = filledEmail.filter((x, j)=> j!==x); it give an error i is not defined – Lina Basuni May 15 '20 at 19:26

Detect duplication of values of input fields

1 Answers1