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

Rav*_*eja 6 html javascript validation jquery input

我有多个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">
Run Code Online (Sandbox Code Playgroud)

JavaScript的

$('.selector').change(function () {
    alert();
});
Run Code Online (Sandbox Code Playgroud)

在这里小提琴

Zak*_*rki 7

更新小提琴.

您可以$(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');
    }
});
Run Code Online (Sandbox Code Playgroud)
<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">
Run Code Online (Sandbox Code Playgroud)

  • 感谢@Tushar的建议,更新我的答案,但我认为我们必须使用`length> 1`,因为我们有当前输入的值,请检查. (3认同)
  • `if($('.selector [value ="'+ $(this).val()+'"]').length){alert('不能使用'); {` (2认同)

mad*_*scu 2

试试这个代码:

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

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