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


I want to make the input field has unique value

假设页面(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类

a类<这个是重复的,所以它应该显示一个错误消息>

类c

类d

我想我可以在action。php页面中使用if语句来检查提交字段是否有重复

,但我不希望所有的其他值丢失时,我重新加载这个页面显示错误

在html5中有属性之类的吗?

谢谢

不,这不能单独使用HTML5。您必须编写一些JavaScript来实现这一点。JavaScript代码应该检查所有的值,如果有两个相同,则阻止表单成功提交。

在这种情况下,您可以使用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/

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();
});
<<p> jsfiddle演示/strong>