скажем, что есть 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/