我想让输入字段具有唯一值

Question

让我们说页面（A）有5个输入字段

<form class="classesName" action="action.php" method="POST">
     <input type="text" name="class1" placeholder="Class Name1?" required="">
     <input type="text" name="class2" placeholder="Class Name2?" required="">
     <input type="text" name="class3" placeholder="Class Name3?" required="">
     <input type="text" name="class4" placeholder="Class Name4?" required="">
     <input type="text" name="class5" placeholder="Class Name5?" required="">
</form>

我希望用户填写所有字段但它必须是每个字段的唯一类名

所以他无法填补

一级

b级

class a <this one is duplicate'，因此它应显示错误消息

c级

d级

我想我可以在action.php页面中创建if语句来检查提交的字段中是否存在重复

但是当我再次重新加载此页面以显示错误时，我不希望丢失所有其他值

是不是像html5中的属性或类似的东西？

谢谢

Answer 1

不，单靠HTML5无法做到这一点。 你必须编写一些JavaScript才能实现这一目标。 JavaScript代码应检查所有值，如果任何两个相同，则阻止表单成功提交。

Answer 2

在这种情况下，您可以使用javascript在每次用户填写文本框时验证字段。 这是一个例子：

$('input[type=text]').on('change',function(){
    var arr = [];
    $siblings = $(this).siblings();
    $.each($siblings, function (i, key) {
       arr.push($(key).val()); 
    });
    if ($.inArray($(this).val(), arr) !== -1)
    {
        alert("duplicate has been found");
    }
});

JSFiddle： http ： //jsfiddle.net/x66j3qw3/

Answer 3

var frm = document.querySelector('form.classesName');
var inputs = frm.querySelectorAll('input[type=text]');

frm.addEventListener('submit', function(e) {
    e.preventDefault();
    var classArr = [];

    for(var i = 0; i < inputs.length; i++) {
        if(classArr.indexOf(inputs[i].value) != -1) {
            inputs[i].style.backgroundColor = "red";
            return false;
        }
        else
            classArr.push(inputs[i].value);
    }
    frm.submit();
});

jsfiddle DEMO