Custom jQuery validation for duplicated repeating fields inside each container in one form

Question

I'm trying to check if there are duplicated values for specific input field which is repeating inside each containing element.

The filed should be considered as a "duplicate" only if has the same value with other comparing field(s) and sharing the same parent container, which means the field can have the same value in 2 or more different containers. I now it sounds a bit confusing but I will add the markup and the current jQuery code so hopefully it will be more clear.

var attendees_group = $('.attendee-accordion-group'),
  inputs = attendees_group.find('input[name*="_attendeeemail"]');

inputs.change(function(e) {

  //Create array of input values
  var ar = inputs.map(function() {
    if ($(this).val() != '') return $(this).val()
  }).get();

  //Create array of duplicates if there are any
  var unique = ar.filter(function(item, pos) {
    return ar.indexOf(item) != pos;
  });

  console.log(unique.length);

  //if duplicates
  if (unique.length != 0) {
    //do something
  }

});

body {
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px
}

h3 {
  display: block;
  margin: 0 0 15px 0;
  font-size: 18px;
}

h4 {
  padding: 0;
  margin: 0 0 15px 0;
  font-size: 15px;
}

form {
  padding: 20px;
}

.attendee-accordion-group {
  padding: 40px;
  border: 1px solid #999;
  margin-bottom: 20px;
}

input {
  border: 1px solid #ccc;
  width: 50%;
  line-height: 1;
  height: 20px;
}

.button {
  display: inline-block;
  background: #0274be;
  color: #fff;
  padding: 10px 30px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  margin-bottom: 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form>
  <h3>Event Title 1</h3>

  <div class="attendee-accordion-group">

    <h4>Attendee 1</h4>

    <div class="attendee-panel">

      <p>
        <label for="field_attendeename_1__1" class="">Name</label>
        <span class="input-wrapper">
        <input type="text" class="input-text" name="field_attendeename_1__1" id="field_attendeelastname_1__1" value="">
      </span>
      </p>
      <p>
        <label for="field_attendeeemail_1__1" class="">Email</label>
        <span class="input-wrapper">
        <input type="text" class="input-text" name="field_attendeeemail_1__1" id="field_attendeeemail_1__1" value="">
      </span>
      </p>
    </div>

    <h4>Attendee 2</h4>

    <div class="attendee-panel">
      <p>
        <label for="field_attendeename_1__2" class="">Name</label>
        <span class="input-wrapper">
        <input type="text" class="input-text" name="field_attendeename_1__2" id="field_attendeelastname_1__2" value="">
      </span>
      </p>
      <label for="field_attendeeemail_1__2" class="">Email</label>
      <span class="input-wrapper">
        <input type="text" class="input-text" name="field_attendeeemail_1__2" id="field_attendeeemail_1__2" value="">
      </span>
      </p>
    </div>

    <h4>Attendee 3</h4>

    <div class="attendee-panel">
      <p>
        <label for="field_attendeename_1__3" class="">Name</label>
        <span class="input-wrapper">
        <input type="text" class="input-text" name="field_attendeename_1__3" id="field_attendeelastname_1__3" value="">
      </span>
      </p>
      <p>
        <label for="field_attendeeemail_1__3" class="">Email</label>
        <span class="input-wrapper">
        <input type="text" class="input-text" name="field_attendeeemail_1__3" id="field_attendeeemail_1__3" value="">
      </span>
      </p>
    </div>

  </div>

  <h3>Event Title 2</h3>

  <div class="attendee-accordion-group">

    <h4>Attendee 1</h4>

    <div class="attendee-panel">
      <p>
        <label for="field_attendeename_2__1" class="">Name</label>
        <span class="input-wrapper">
        <input type="text" class="input-text" name="field_attendeename_2__1" id="field_attendeelastname_2__1" value="">
      </span>
      </p>
      <p>
        <label for="field_attendeeemail_2__1" class="">Email</label>
        <span class="input-wrapper">
        <input type="text" class="input-text" name="field_attendeeemail_2__1" id="field_attendeeemail_2__1" value="">
      </span>
      </p>
    </div>

    <h4>Attendee 2</h4>

    <div class="attendee-panel">
      <p>
        <label for="field_attendeename_2__2" class="">Name</label>
        <span class="input-wrapper">
        <input type="text" class="input-text" name="field_attendeename_2__2" id="field_attendeelastname_2__2" value="">
      </span>
      </p>
      <p>
        <label for="field_attendeeemail_2__2" class="">Email</label>
        <span class="input-wrapper">
        <input type="text" class="input-text" name="field_attendeeemail_2__2" id="field_attendeeemail_2__2" value="">
      </span>
      </p>
    </div>

  </div>

  <button type="button" class="button">Next</button>
</form>

<div class="error">
</div>

OK, so, the container is a div with a class .attendee-accordion-group, and inside, each text field labeled email, should be unique. I hope this clarifies issue a bit.

I used the js code for comparing field values from this answer

Right now all the "email" fileds, no matter of container are duplicates if values are the same, I was wondering if someone can help me with this.

Can you post some examples of what should be allowed and what is not allowed? — JM-AGMS, May 13 '20 at 14:39
@JM-AGMS sure, in each `attendee-accordion-group` there are attendees, so each attendee inside the group needs to have an unique value for email field, so duplicated email fields inside the group are not allowed, that's it. — Darko, May 13 '20 at 14:45

score 1 · Accepted Answer · answered May 13 '20 at 16:11

If I understood you correctly, you are wanting to catch duplicates of the same input values in each "group" or each "event" in your example.

Here is something I put together that does just that. It will need some more adjustments like only outputting one error message for each duplicate value, instead of two. In the linked jsFiddle example, the validation only takes place on load, and not when the "Next" button is pressed. But this should push you in the correct position.

I added comments to the code to help you understand is going on.

jsFiddle: https://jsfiddle.net/mgqucrsz/1/

// will hold all the duplicate error message
var errorMessage = '';
// loops through each "group"
$('.attendee-accordion-group').each(function() {
  // will hold all input values and names of each "group"
  var inputs = [];
  // loops through all inputs of the current group
  $(this).find('input').each(function() {
    // saves the value and name of each input for the current group
    var input = {'name':$(this).attr('name'), 'value':$(this).val()};
    // saves the current input/name into a growing list of inputs for this current group
    inputs.push(input);
  });
  // loops through the inputs list generated in the previous loop for this group
  for (var i = 0; i < inputs.length; i++) {
    // shortens the reference to the current input
    var input = inputs[i];
    // returns the input that is duplicated
    //   1. Loops though the inputs list
    //   2. If the current index of the current input does not match the index of the item being looked up; in other words this will ignore itself, since matching with itself is technically a match
    //   3. If the current input value matches with the looked up input
    //   4. "&& item.value" makes sure that an input value exists, since empty values technically match with other empty values
    var conflict = inputs.find(function(item) {return inputs.indexOf(item) !== i && item.value === input.value && item.value;});
    // if conflict is not undefined; would be undefined if no duplicates were found
    if (conflict) {
      // append this error message to a growing error message
      errorMessage += 'Value of form name ' + input.name + ' already exists on form name ' + conflict.name + '.<br>\n';
    }
  }
});
// finally output the error message
$('div.error')[0].innerHTML += errorMessage;

Tested, and with a few minor modifications, it works! Thank you again, answer accepted. — Darko, May 14 '20 at 11:22

Custom jQuery validation for duplicated repeating fields inside each container in one form

1 Answers1