How to dynamically Restrict Duplicated value of <input='text'/> in a looped random v-CodePudding

$('#inputqty').on('change keyup',function(){
  let inputs='';
  let value = parseInt($(this).val());
  if (0<value) {
    for (let i = 0; i<value; i  ) {
      inputs =`<div style="margin-left: 10px; margin-top: 10px;">
                <input autocomlete="off" type="text" style="margin-bottom:5px;margin-top:5px; margin-left:10px;"  name="item_serial" id="serial_number" placeholder=" Serial Number. item:${i 1}" tabindex="${i 6 1}" required /></br>
              </div>`
      }
  }
  else{
    inputs =`<center>No item Quantity inputted!!!<center>`
    }
  $('#contentforserial').html(inputs);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="number" min="1" max="10"id="inputqty" name="inputqty">

<div style="height: 190px;width:260px;padding:3px; background:greenyellow;" id="containerforserial">
    <div>Enter Serial Number of Item:</div>
    <div  id="contentforserial" style="  height:150px;overflow:auto;background:#fff;">
      <div id="demo"></div>
    </div>
</div>

CodePudding user response：

Create an object which will be used as database to store input values. Loop through input elements and store value as key in the object and an array as key. Push input element in the array. Then loop through object values (array of input elements) and if array contains more than one input element, that means these input elements have duplicate values, do whatever you want with them:

let inputElements;
$('#inputqty').on('change keyup',function(){
  let inputs='';
  let value = parseInt($(this).val());
  if (0<value) {
    for (let i = 0; i<value; i  ) {
      inputs =`<div style="margin-left: 10px; margin-top: 10px;">
                <input autocomlete="off" type="text"  style="margin-bottom:5px;margin-top:5px; margin-left:10px;"  name="item_serial[]" id="serial_number${i 1}" placeholder=" Serial Number. item:${i 1}" tabindex="${i 6 1}" required /></br>
              </div>`
      }
  }
  else{
    inputs =`<center>No item Quantity inputted!!!<center>`
    }
  $('#contentforserial').html(inputs);

  //cache list of input elements
  inputElements = document.getElementById('contentforserial').querySelectorAll("input.serial_number");
});

document.getElementById("contentforserial").addEventListener("input", function(e)
{
  //generate list of values from all inputs
  const values = {};
  for(let i = 0; i < inputElements.length; i  )
  {
    const value = inputElements[i].value.trim();
    if (!values[value])
      values[value] = [];

    values[value].push(inputElements[i]);
  }
  //check if multiple inputs have the same value
  for(let value in values)
  {
    for(let i = 0, count = values[value].length; i < count; i  )
    {
      values[value][i].classList.toggle("error", value !== "" && count > 1);
    }

  }
});

.error
{
  background-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="number" min="1" max="10"id="inputqty" name="inputqty">

<div style="height: 190px;width:260px;padding:3px; background:greenyellow;" id="containerforserial">
    <div>Enter Serial Number of Item:</div>
    <div  id="contentforserial" style="  height:150px;overflow:auto;background:#fff;">
      <div id="demo"></div>
    </div>
</div>

CodePudding user response：

You can create one function to check duplicate value then on your input add onchange event call to this function

Example

function checkForDuplicates() {      
    var valuesAlreadySeen = []
    $(".serial_number").each(function() {
        if($(this).val() != ""){
          if (valuesAlreadySeen.indexOf( $(this).val() ) !== -1) {
            /* do some thing here */
            alert( $(this).val() ' already input' );
            
            /* clear this input */
            $(this).val("");
          }else{
            valuesAlreadySeen.push( $(this).val() );
          }
        }        
    });
  
}

Then add class and on change event to your input

<input  onchange="checkForDuplicates()" />

So, your final code should be

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <input type="number" min="1" max="10"id="inputqty" name="inputqty">
        
        <div style="height: 190px;width:260px;padding:3px; background:greenyellow;" id="containerforserial">
            <div>Enter Serial Number of Item:</div>
            <div  id="contentforserial" style="  height:150px;overflow:auto;background:#fff;">
              <div id="demo"></div>
            </div>
        </div>
    
    <script>
    $(document).ready(function(){
      $('#inputqty').on('change keyup',function(){
        let inputs='';
        let value = parseInt($(this).val());
        if (0<value) {
          for (let i = 0; i<value; i  ) {
            inputs =`<div style="margin-left: 10px; margin-top: 10px;">
                <input  onchange="checkForDuplicates()" autocomlete="off" type="text" style="margin-bottom:5px;margin-top:5px; margin-left:10px;"  name="item_serial[]" placeholder=" Serial Number. item:${i 1}" tabindex="${i 6 1}" required /></br>
              </div>`
          }
        }
        else{
          inputs =`<center>No item Quantity inputted!!!<center>`
        }
        $('#contentforserial').html(inputs);
      });
    });
    
    function checkForDuplicates() {
         
        var valuesAlreadySeen = []
        $(".serial_number").each(function() {
            if($(this).val() != ""){
              if (valuesAlreadySeen.indexOf( $(this).val() ) !== -1) {
                /* do some thing here */
                alert( $(this).val() ' already input' );
                $(this).val("");/* clear this input */
              }else{
                valuesAlreadySeen.push( $(this).val() );
              }
            }        
        });
      
    }
    </script>

CodePudding user response：

Add a class name to your input text inside the loop then

var array = $('.className').map(function(){
  return $(this).val()
}).get();

this array will give you values of input fields, you can validate it, and add the validation error message to the relevant input field using the index of the array.