Я хочу, чтобы поле ввода имело уникальное значение

скажем, что есть 5 полей ввода для страницы (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> 

Я хочу, чтобы пользователь заполнил все поля, но это должно быть уникальное имя класса для каждого поля

поэтому он не может заполнить

класс a

класс b

class a <этот дублируется, поэтому он должен отображать сообщение об ошибке

класс c

класс d

Я думаю, что я могу сделать, если заявление на странице action.php, чтобы проверить, есть ли дублирование в поле отправки или нет

но я не хочу, чтобы все другие значения терялись, когда я снова загружал эту страницу, чтобы отобразить ошибку для него

есть ли свойство в 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

Нет, это невозможно сделать только с 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/