Check if is there any duplicate values in a table

Question

I have a Table with multiple rows and in each row there are some input fields and i want check if there is Duplicates value in table.

Here is my code , first I'm trying to find if is there any empty value , how can I check if is there any duplicates value too?

JavaScript:

<script>
 var isValid;
    function Step2Validation(e) {
        $(".trtickets").each(function () {

            var FindName = $(this).find(".navn");
            var FindLastName = $(this).find(".efternavn");

            if (FindName.val() == "") {
                isValid = false;
                alert("Empty Name");
                return false;
            }
            if (FindLastName.val() == "") {
                isValid = false;
                alert("Empty Lastname");
                return false;
            }

            else {
                $(e).closest('fieldset').slideUp().next().slideDown();

            }

        });
    }

    function step2(e) {

        Step2Validation(e);

    }
</script>

HTML:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

 <tr class="trtickets">
  <td>
    <input type="text" name="model.RegistrationLists[0].Name" value="John" class="form-control navn" placeholder="Name">
  </td>
  <td>
    <input type="text" name="model.RegistrationLists[0].Lastname" class="form-control efternavn" placeholder="Lastname">
  </td>
</tr>
<tr class="trtickets">
  <td>
    <input type="text" name="model.RegistrationLists[1].Name" value="John" class="form-control navn" placeholder="Name">
  </td>
  <td>
    <input type="text" name="model.RegistrationLists[1].Lastname" class="form-control efternavn" placeholder="Lastname">
  </td>
</tr>

   <button type="button" onclick="step2(this);" class="step2">Next</button>

Answer 1

I would suggest avoiding the alert() as it causes the browser to freeze. Instead, consider adding the error message to the page as a displayable.

var isValid = false;

function findDuplicates ($elements, selector) {
                    // filter to just the elements that match the selector
  var valueGroups = $elements.filter(selector).get()
    // reduce to elements to a map consisting of a key being their input value
    // and the map value being an array of elements with that input value
    .reduce(function(elementsByValue, element){
      var value = element.value.trim();
      
      // if we do not have a value, ignore as these will already have an
      // error of Entry required
      if (value) {
        elementsByValue[value] = elementsByValue[value] || [];
        elementsByValue[value].push(element);
      }
      
      return elementsByValue;
    }, {});
  
  // now that we have elements grouped by their input values, any input value
  // that is associated with multiple elements needs to mark those elements
  // as duplicates
  Object.values(valueGroups).forEach(function(group){
    if (group.length > 1) {
      $(group).next('.message').addClass('error').text('Duplicate value');
    }
  });
}

function Step2Validation (e) {
  // find all the inputs
  var $requiredInputs = $('.trtickets').find('.navn, .efternavn');
  
  // find all the inputs that previously had errors, remove the errors
  $requiredInputs.next('.message.error')
    .removeClass('error').html(' ');
  
  $requiredInputs
    // filter to just the elements without a value
    .filter(function(){ return !this.value.trim(); })
    // go to each one of the empty inputs next message element
    .next('.message')
    // add the error class
    .addClass('error')
    // add the error text
    .text('Entry required');
  
  // find duplicates in each separate group
  findDuplicates($requiredInputs, '.navn');
  findDuplicates($requiredInputs, '.efternavn');
  
  // if any of the messages has the error class, it is not valid
  isValid = $requiredInputs.next('.message.error').length < 1;
  
  if (isValid) {
    $(e.target).closest('fieldset').slideUp().next().slideDown();
  }
}

$('.step2').on('click', Step2Validation);

.message.error { color: red; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="Tickettbl" class="table">
  <tbody id="output">
    <tr class="trtickets">
      <td>
        <input type="text" name="model.RegistrationLists[0].Name" class="form-control navn" placeholder="Name">
        <div class="message">&nbsp;</div>
      </td>
      <td>
        <input type="text" name="model.RegistrationLists[0].Lastname" class="form-control efternavn" placeholder="Lastname">
        <div class="message">&nbsp;</div>
      </td>
    </tr>
    <tr class="trtickets">
      <td>
        <input type="text" name="model.RegistrationLists[1].Name" class="form-control navn" placeholder="Name">
        <div class="message">&nbsp;</div>
      </td>
      <td>
        <input type="text" name="model.RegistrationLists[1].Lastname" class="form-control efternavn" placeholder="Lastname">
        <div class="message">&nbsp;</div>
      </td>
    </tr>
  </tbody>
</table>

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