JavaScript form same values

Question

How can I make a form so they cannot repeat the same values in the Input?

I tried a way like:

var text1 = document.getElementById('num1').value;
var text2 = document.getElementById('num1').value;
var textform = [text1,text2];
if ( 
      text1 == text2 ||
      text2 == text1
   ) {
        alert("repeated numbers");
            return false;
     }

But this is gets me into two troubles: - If I put no value, it will say: Repated Numbers - If I want to make this for 100 form values, it takes a lot of code

Answer 1

You can simply get all inputs iterate them twice to check if they are equals

var inputs = document.getElementsByTagName('input');
for (i = 0; i < inputs.length; i++) {
  for (j = i + 1; j < inputs.length; j++) {
    if (inputs[i].value === inputs[j].value) {
      console.log('value of input: ' + i + ' equals input: ' + j);
    }
  }
}

<input value="56" />
<input value="12" />
<input value="54" />
<input value="55" />
<input value="12" />

Answer 2

Presumably the inputs are in a form. You can access all form controls via the form's elements collection. The following will check the value of all controls, not just inputs, but can easily be restricted to certain types.

If you want to include radio buttons and checkboxes, check that they're checked before testing their value.

function noDupeValues(form) {
  var values = Object.create(null);
  return [].every.call(form.elements, function(control){
    if (control.value in values && control.value != '') return false;
    else return values[control.value] = true;
  });
}

<form id="f0" onsubmit="return noDupeValues(this);">
  <input name="inp0">
  <input name="inp0">
  <input name="inp0">
  <button>Submit</button>
</form>

For old browsers like IE 8 you'll need a polyfill for every.

Answer 3

With jquery you can iterate directly over the inputs.

<form>
  <input type="text" >
  <input type="text" >
  <input type="text" >
  <input type="text" >
  <input type="text" >
  <input type="text" >
  <button>
  TEST
  </button>
</form>

function checkValues(){
  var used = {};
  var ok = true;

  $('form input[type="text"]').each(function(){
    var value = $(this).val();

    if(value !== ""){

      if(used[value] === true){
        ok = false;
        return false;
      }

      used[value] = true;

    }

  });

  return ok;
}

$('button').click(function(event){
    event.preventDefault();
    if(!checkValues()){
      alert("repeated numbers");
    };
});

https://jsfiddle.net/8mafLu1c/1/

Answer 4

Here's a way of doing it that automatically picks up all the text inputs in your document and validates based on what you're looking for. Would be simple enough to expose the valid value and make this the validation handler (or part of one) that handles a form submission.

<meta charset="UTF-8">
<input id="num1" type="text" value="foobar1">
<input id="num2" type="text" value="foobar2">
<input id="num3" type="text" value="foobar3">
<input id="num4" type="text" value="foobar4">
<input id="num5" type="text" value="foobar5">
<button onClick="checkValues();">Validate</button>

<script>
function checkValues() {
    var inputs = document.getElementsByTagName('input');
    arrInputs = Array.prototype.slice.call(inputs);
    var valid = true;
    var valueStore = {};
    arrInputs.forEach(function(input) {
        if (input.type == 'text') {
            var value = input.value.toUpperCase();
            if (valueStore[value]) {
                valid = false;
            } else {
                valueStore[value] = true;
            }
        }
    });

    if (valid) {
        alert('Valid: No matching values');
    } else {
        alert('Invalid: Matching values found!');
    }
}
</script>

Answer 5

If you give all the input's a common class then you quickly loop through them.

The HTML:

<input type="text" name="num1" class="this that number"></input>
<input type="text" name="num2" class="this number"></input>
<input type="text" name="num3" class="that number"></input>
<input type="text" name="num4" class="number"></input>
<input type="text" name="num5" class=""></input> <!-- we don't want to check this one -->
<input type="text" name="num6" class="number that this"></input>
<input type="text" name="num7" class="this that number"></input>

The JavaScript:

// get all the inputs that have the class numbers
var ins = document.querySelectorAll("input.numbers");

// a tracker to track
var tracker = {};

// loop through all the inputs
for(var i = 0, numIns = ins.length; i < numIns; ++i)
{
    // get the value of the input
    var inValue = ins[i].value.trim();

    // skip if there is no value
    if(!inValue) continue;

    // if the value is already tracked then let the user know they are a bad person
    // and stop
    if(tracker[inValue])
    {
        alert("You are a bad person!");
        return;
    }

    // track the value
    tracker[inValue] = true;
}

You could also enhance this to let the user know which inputs have duplicate values:

// get all the inputs that have the class numbers
var ins = document.querySelectorAll("input.numbers");

// a tracker to track
var tracker = {};

// loop through all the inputs
for(var i = 0, numIns = ins.length; i < numIns; ++i)
{
    // get the value of the input
    var inValue = ins[i].value.trim();

    // skip if there is no value
    if(!inValue) continue;

    // if the value is already tracked then error them
    if(tracker[inValue])
    {
        // mark the current input as error
        ins[i].className += " error";

        // mark the first found instance as an error
        ins[tracker[inValue]].className += " error";
    }

    // save the index so we can get to it later if a duplicate is found
    tracker[inValue] = i;
}

Answer 6

You could do something like this:

var text1 = document.getElementById('num1').value;
var text2 = document.getElementById('num2').value;
var textform = [text1, text2];
var seen = {};

textform.forEach(function(value) {
    if (seen[value]) {
        alert('Bad!');
    }

    seen[value] = true;
});

In the code above, we loop over each value in the array. The first time we encounter it, we push it into a map. Next time (if) we hit that value, it will exist in the map and it will tell us we've seen it before.

Answer 7

You could give all of your text elements the same class, and grab their values by class name to simplify building the array of text values.

<input type="text" class="checkDupe" id="input1" />
<input type="text" class="checkDupe" id="input2" />

Then grab their values in javascript

var checkDupes = document.getElementsByClassName('checkDupe');
var textArray = [];
for(var i = 0; i < checkDupes.length; i++){
  textArray.push(checkDupes[i].value);
}

Now that we have an array of values that they entered, check to see if any of them repeat by sorting the array, and seeing if any two elements side-by-side are the same.

textArray.sort();
var dupes = false;
for(var i = 0; i < textArray.length; i++){
  if(textArray[i] === textArray[i + 1]) dupes = true;
}

If we find any duplicates, let the user know.

if(dupes) alert('Repeated numbers!');