如何顯示文本框重復值的警報

Question

我有多個具有不同值的input字段。 我可以編輯它們但不能為空（如果空顯示警報）。 當我將其編輯為新值時，如果新值與任何其他輸入值匹配，我需要一個不能使用它的警報。

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();
});

在這里小提琴

Answer 1

更新小提琴 。

您可以使用$(this).attr('value', $(this).val());刷新value屬性$(this).attr('value', $(this).val()); 首先，然后檢查是否有任何其他具有類selector字段使用值選擇器$('.selector[value="' + current_value + '"]').length 。

希望這可以幫助。

---

 $('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 2

試試這個代碼：

$('.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 3

對每個輸入文本字段使用唯一的Id，並使用getElementById("[YourDefinedId]")在JavaScript方法中獲取它們的值，並將它們相互比較並顯示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]); }); 

更新以專注於文本框JS更新