How to show a notification of a duplicate text field value

Question

I have several input fields with different values. I can edit them, but I cannot be empty (if the warning is empty). When I edit it for new values, if the new value matches any of the other input values, I need a warning that you cannot use.

HTML

 <input type="text" class="selector" value="new"> <input type="text" class="selector" value="old"> <input type="text" class="selector" value="newest"> <input type="text" class="selector" value="oldest"> <input type="text" class="selector" value="older"> 

Javascript

 $('.selector').change(function () { alert(); }); 

Feed here

Answer 1

Try:

 $('.selector').on('blur',function () { if ($('.selector[value="'+$(this).val()'+"]').not($(this)).length > 0 || current_value.length == 0 ) { alert('duplicate value'); } }); 

http://jsfiddle.net/0c0qep6y/12/

Answer 2

Updated script .

First you can update the value attribute with $(this).attr('value', $(this).val()); and then check if another field with selector class has one value using the value selector $('.selector[value="' + current_value + '"]').length .

Hope this helps.

---

 $('body').on('blur', '.selector', function () { $(this).attr('value', $(this).val()); if ($('.selector[value="' + $(this).val() + '"]').length > 1 ) { $(this).focus(); alert('You cannot use this'); }else if($(this).val().length == 0) { alert('Empty value not accepted'); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="text" class="selector" value="new"> <input type="text" class="selector" value="old"> <input type="text" class="selector" value="newest"> <input type="text" class="selector" value="oldest"> <input type="text" class="selector" value="older"> 

Answer 3

Use a unique identifier for each text input field and get their values ​​in your JavaScript method using getElementById("[YourDefinedId]") and compare them with each other and show alter.

HTML

 <input type="text" class="selector" id="first" value="new"> <input type="text" class="selector" id="second" value="old"> <input type="text" class="selector" id="third" value="newest"> <input type="text" class="selector" id="fourth" value="oldest"> <input type="text" class="selector" id="fifth" value="older"> 

Javascript

 function compareValues(){ var first = getElementById("first").value; var second = getElementById("second").value; var third = getElementById("third").value; var fourth = getElementById("fourth").value; var fifth = getElementById("fifth").value; //Now you can compare them using null check and empty. } 

Answer 4

 $('.selector').change(function () { var changedItem = $(this); var otherSelectors = $(".selector").not(changedItem); var matchingItemPresent = []; $.each(otherSelectors, function (count, item) { $(item).val().trim()== changedItem.val().trim(); matchingItemPresent.push($(item)); }); matchingItemPresent.length > 0 ? alert("Duplicate entry..same value exists in another field") : $.noop(); matchingItemPresent[0].focus(); console.log(matchingItemPresent[0]); }); 

updated to focus on the JS text box Updated