Проверка нескольких input type="text" на уникальность ввода

@vaydich · Регистрация: 10.10.2014

Студворк — интернет-сервис помощи студентам

Добрый день!

В форме помимо всего есть 5 полей(или больше) ввода для указания данных(модели). Подскажите, как сделать на стороне клиента, чтобы при каждом следующем вводе значения в инпут(наверное, при blur), шла проверка нет ли уже такого значения в другом инпуте, и если есть удалялось повторяющееся значение. Спасибо.

@kalabuni · 11.03.2015, 17:44

JavaScript
1
2
3
4
5
6
var V = [];
onload = function ()
{
for (var inp = document.getElementById ('md').getElementsByTagName ('input'), j = 0, J = inp.length; j < J; j++)
inp [j].onblur = function () {if (!!V [this.value]) this.value = ''; else V [this.value] = 1}
}

HTML5
1
2
3
4
5
6
7
<div id="md">
<p><input>
<p><input>
<p><input>
<p>...
<p><input>
</div>

есть нюансик, но если не заметите, то, значит, это для вас не критично

@arcmag · 11.03.2015, 17:47

Вот так вот можно, хотя как мне кажется странная задачка какая то...

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Документ без названия</title>
</head>
<script type="application/javascript">
var inputElements;
window.onload = function(){
    inputElements = document.forms.myForm.querySelectorAll("input[type='text']");
    for(var i=0; i<inputElements.length; i++)
        inputElements[i].addEventListener("keyup",uniquenessCheck);
}
function uniquenessCheck(){
    for(var i=0; i<inputElements.length; i++){
        if(inputElements[i]==this) continue;
        if(this.value==inputElements[i].value){
            this.value = "";
            alert("Повтор значения!");
            return;
        }
    }
}
</script>
<body>
<form name="myForm">
    <input type="text">
    <input type="text">
    <input type="text">
    <input type="text">
    <input type="text">
</form>
</body>
</html>

@Lazy_Den · 11.03.2015, 18:01

Не по теме:

arcmag, а если я в первом поле напишу "111", а во втором захочу написать "1111"?

Сообщение от vaydich

если есть удалялось повторяющееся значение.

Вот этот момент проясните. Как и где удалялось? Очищалось значение поля, если да, то какого именно: текущего или того, что уже было заполнено ранее? Или удалялся сам элемент. Кстати, совсем необязательно это делать на клиенте. Я ж так понимаю, что значения вы получаете в виде массива, а значит на сервере их можно легко "почистить", например, с помощью функции array_unique. Пока могу предложить такой вариант:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var models = myform.elements['model[]'];
[].forEach.call(models, function(inp){
    inp.addEventListener('blur', checkUnique, false);
});
function checkUnique(){
    var vals = {};
    for(var i = 0; i < models.length; i++) {
        var v = models[i].value.trim();
        if(v !== '' && !vals.hasOwnProperty(v)) {
            vals[v] = i;
        } else {
            models[i].value = '';
        }
    }
}

HTML5
1
2
3
4
5
6
7
<form name="myform">
    <input type="text" name="model[]"><br>
    <input type="text" name="model[]"><br>
    <input type="text" name="model[]"><br>
    <input type="text" name="model[]"><br>
    <input type="text" name="model[]">
</form>

@arcmag · 11.03.2015, 18:04

Ну наверное я слишком буквально понял, мне казалось что "при каждом следующей вводе" это означало при каждом нажатии клавиши

JavaScript
1
inputElements[i].addEventListener("blur",uniquenessCheck);

@Lazy_Den · 11.03.2015, 18:15

Сообщение от arcmag

Ну наверное я слишком буквально понял

По всей логике, события на клавишах или мыши тут не подойдут, т.к. для проверки финального результата, нужно дать пользователю "закончить мыслю". Тут вариант или blur, или change, или уже перед отправкой формы.

@vaydich · 11.03.2015, 18:36 **[ТС]**

На сервере я делаю другую валидацию. Задача касается именно клиентской части. При вводе в input значения, которое уже имеется(введено в других input) удалять текущее с сообщением о повторе.

arcmag, почему задачка странная-то?

@Lazy_Den · 11.03.2015, 18:38

Сообщение от vaydich

удалять текущее с сообщением о повторе

Вариант, я предложил выше, а сообщение о повторе, надеюсь, что уже сами сможете дописать.

@vaydich · 11.03.2015, 18:40 **[ТС]**

Lazy_Den, видел, спасибо. сейчас буду смотреть. Но вариант arcmag, кстати, тоже подходящий, думаю

@arcmag · 11.03.2015, 18:41

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

@vaydich · 11.03.2015, 18:43 **[ТС]**

arcmag, есть некая спецификация, в которой нужно убрать возможность повтора модели. ничего особенного

Новые блоги и статьи Все статьи Все блоги /
Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а привычная функция main(). . .	моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .	Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом	http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .
http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .	Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь(не выше 3-го порядка) постоянного тока с элементами R, L, C, k(ключ), U, E, J. Программа находит переходные токи и напряжения на элементах схемы классическим методом(1 и 2 з-ны. . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .	Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/

@vaydich 0 / 0 / 0 Регистрация: 10.10.2014 Сообщений: 10

	Проверка нескольких input type="text" на уникальность ввода 11.03.2015, 17:11. Показов 3907. Ответов 10 Метки нет (Все метки) Добрый день! В форме помимо всего есть 5 полей(или больше) ввода для указания данных(модели). Подскажите, как сделать на стороне клиента, чтобы при каждом следующем вводе значения в инпут(наверное, при blur), шла проверка нет ли уже такого значения в другом инпуте, и если есть удалялось повторяющееся значение. Спасибо. 0

@vaydich 0 / 0 / 0 Регистрация: 10.10.2014 Сообщений: 10
	11.03.2015, 18:36 [ТС]
	На сервере я делаю другую валидацию. Задача касается именно клиентской части. При вводе в input значения, которое уже имеется(введено в других input) удалять текущее с сообщением о повторе. arcmag, почему задачка странная-то? 0

@vaydich 0 / 0 / 0 Регистрация: 10.10.2014 Сообщений: 10
	11.03.2015, 18:40 [ТС]
	Lazy_Den, видел, спасибо. сейчас буду смотреть. Но вариант arcmag, кстати, тоже подходящий, думаю 0

@arcmag 347 / 322 / 203 Регистрация: 27.06.2014 Сообщений: 762
	11.03.2015, 18:41
	Ну мне показалось странным, где это на практике может понадобиться такая вот массовая проверка всех полей 0

@vaydich 0 / 0 / 0 Регистрация: 10.10.2014 Сообщений: 10
	11.03.2015, 18:43 [ТС]
	arcmag, есть некая спецификация, в которой нужно убрать возможность повтора модели. ничего особенного 0