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

小提琴here

Answer 1

<强> Updated Fiddle

您可以先使用$(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方法中获取它们的值，并将它们相互比较并显示更改。

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

＆＃13;

$('.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]);
});

＆＃13;

已更新，专注于文本框JS Updated

如何显示文本框重复值的警报

4 个答案: