时间戳

首页 > 解决方案 > 验证以防止输入文本上的重复值

javascript - 验证以防止输入文本上的重复值

问题描述

当我单击提交按钮时，我试图防止具有相同名称的输入出现重复值，但它不工作，我不知道为什么......我需要一些帮助来理解为什么不工作？提前非常感谢！

这是我的代码：

我尝试使用我在此处找到的解决方案，该解决方案适用于“输入更改”行为，但它不适用于按钮单击...我的按钮：

<button type="button" id="approve" class="positive valid" tabindex="-1">Approve</button>

和我的jQuery

$('#received').on('click',function() {
    var $current = $(this);
    if ($('input[name^="RE_SignedByID"]').val() == $current.val() && $('input[name^="RE_SignedByID"]').attr('tabindex') !== $current.attr('tabindex') ) {
    alert('You can not have duplicated ID´s');
       return false;                        
    }else {
       return true;
    }
});

我想显示警报并阻止提交。非常感谢您的帮助！

标签： javascriptjqueryhtmlfrontend

解决方案

问题是因为您将单击按钮的值与第一个input[name^="RE_SignedByID"]元素进行比较。

input[name^="RE_SignedByID"]要解决此问题，您可以改为使用创建一个包含所有值的数组map()。然后，您可以对该列表进行重复数据删除并比较生成的数组长度。如果它们不同，则存在重复。试试这个：

$('#received').on('click', function(e) {
  var values = $('input[name^="RE_SignedByID"]').map(function() {
    return this.value.trim();
  }).get();  
  var unique =  [...new Set(values)];

  if (values.length != unique.length) {
    e.preventDefault();
    alert('You can not have duplicated ID\'s');
  }
});

请注意，这[...new Set(values)]在 IE 中不起作用。如果您需要支持旧版浏览器，则有很多替代方法可以对数组进行重复数据删除。有关更多信息，请参阅此答案。

推荐阅读