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