Артём Мáлков

Проверка совпадения 2-х полей input на jQuery

27 фев2 комм

Специально для читателей нашего сайта я написал небольшой скрипт, который считывает содержимое двух (можно сделать и более) полей и сравнивает их между собой.

Для чего вам это может понадобиться? Предположим, у вас есть 2 поля – например, поле «Пароль» и поле «Подтверждение пароля». Мы сверяем эти поля и в случае расхождения данных - выводим соответствующее сообщение.

Итак, у нас есть форма с 2-мя полями:

<form method="post" name="form" action="">

	<div>Введите пароль:</div>
	<input type="text" class="password">
	
	<div>Подтвердите пароль:</div>
	<input type="text" class="cor_password">
	
	<div class="error"></div>

	<input type="submit" value="submit" id="submit">

</form>

Что нам нужно сделать?

1. Проверить совпадение второго поля с первым.
2. Если поля не совпадают, запретить отправку формы + вывод соответствующего сообщения.

Для решения этих задач воспользуйтесь следующим скриптом:

<script>

	$(".cor_password").on("keyup", function() { // Выполняем скрипт при изменении содержимого 2-го поля
	
		var value_input1 = $(".password").val(); // Получаем содержимое 1-го поля
		var value_input2 = $(this).val(); // Получаем содержимое 2-го поля
		
		if(value_input1 != value_input2) { // Условие, если поля не совпадают
		
			$(".error").html("Пароли не совпадают!"); // Выводим сообщение
			$("#submit").attr("disabled", "disabled"); // Запрещаем отправку формы
			
		} else { // Условие, если поля совпадают
		
			$("#submit").removeAttr("disabled");  // Разрешаем отправку формы
			$(".error").html(""); // Скрываем сообщение
			
		}
		
	});

</script>

Скрипт подробно комментирован, и разобраться в нем, думаю, труда не составит. И, разумеется, его можно переделать под свои нужды и адаптировать под любую CMS.

Рекомендуем к просмотру
Дополнительное поле для отзывов к товару в OpenCart
Хаки
Объединяем несколько значений input/textarea в одном поле на jQuery
Модули и скрипты
Поиск по определенным категориям в DLE
Хаки
2
комментария
Форма комментирования этого поста скрыта. Авторизуйтесь, чтобы расширить привилегии гостевого посещения и получить необходимую помощь от сообщества Pandoge.
    • 4
    1
      •  Проверенный
    28 ноя в 18:57

    Не работает корректно. Данный скрипт проверяет лишь совпадение символов из 2-го инпута с 1-м. Т.е. можно вводить во втором поле количество символом хоть в двое больше, главное, чтобы они совпадали с символами из 1-го инпута и валидация проходит.

    • 6
    766
      •  Гости
    30 мар в 11:37

    Спасибо, помогло. И за комментирование кода отдельный лайк.smiley

Подняться наверх
«Pandoge» - помощник вебмастера