我想让输入字段具有唯一的值 [英] I want to make the input field has unique value

问题描述

让我们说，页面（A）有5个输入域

 < form class =classesNameaction =action.phpmethod =POST> 
< input type =textname =class1placeholder =Class Name1？需要=  > 
< input type =textname =class2placeholder =Class Name2？需要=  > 
< input type =textname =class3placeholder =Class Name3？需要=  > 
< input type =textname =class4placeholder =Class Name4？需要=  > 
< input type =textname =class5placeholder =Class Name5？需要=  > 
< / form> 
  

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

所以他无法填充

class a

class b

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

class c

class d

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

但我不希望所有其他值都会丢失，因为我再次重新载入此页面以显示他的错误

在那里像html5中的属性或类似的东西？

感谢

解决方案

  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

let us say that there is 5 input field for page (A)

<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>

I want the user to fill all the fields BUT it must be unique class name for each field

so he can't fill

class a

class b

class a < this one is duplicated so it should display an error message

class c

class d

I think I can make if statement in the action.php page to check is there a duplication in the submitted field or not

but I don't want all the other values to be lost when I reload this page again to display the error for him

is there like a property in html5 or anything like that ?

thanks

解决方案

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

这篇关于我想让输入字段具有唯一的值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！