Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 29.01.2020, 10:52
Кандидат Javascript-наук
Отправить личное сообщение для Katy93 Посмотреть профиль Найти все сообщения от Katy93
 
Регистрация: 28.12.2018
Сообщений: 137

Проверка динамических полей на валидацию
Как проверить поля на валидацию, которые добавляются в форму динамически, раньше я получала value поля с помощью id и его проверяла. Теперь поля добавляются динамически и с помощью id не получается. Вот у меня есть html код который я написала, пока сделала без динамического добавления а просто создала 3 строки с полями по 3 поля в каждой строке age, exp, gender. Нужно проверить каждое поле каждой строки при этом поля одной строки между собой связаны. В итоге ошибка о неправильном заполнении должна вывестись в ячейку ниже input'а, id="num_error_message". Вот мой код, там есть пример с одним полем. Как можно сделать валидацию, для всех полей в таблице?
<html>
<head><title>Test</title>
 <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
 $(document).ready(function(e){
  var error_num1;
    $('#pole').keypress('', function () {
       var pattern = /^\d+$/;
       var num = $("#pole").val();
       if (pattern.test(num) && num !== '') {
         $("#num_error_message1").hide();
         $("#pole").css("border-bottom","2px solid #34F458");
       }else
       {
          $("#num_error_message1").html("Только цифры");
          $("#num_error_message1").show();
          $("#pole").css("border-bottom","2px solid #F90A0A");
          error_num1 = true;
       }
    });
   });
</script>
</head>
<body>
<form method="POST" action="form.php">
<input id="pole"><br>
<span class="error_form" id="num_error_message1"></span>
<table border="0">
  <tr>
    <td><input type="text" value="" name="mass[age][]"></td>
    <td><input type="text" value="" name="mass[exp][]"></td>
    <td><input type="text" value="" name="mass[gender][]"></td>
  </tr>
  <tr>
    <td><span class="error_form" id="num_error_message"></span></td>
    <td><span class="error_form" id="num_error_message"></span></td>
    <td><span class="error_form" id="num_error_message"></span></td>
  </tr>

  <tr>
    <td><input type="text" value="" name="mass[age][]"></td>
    <td><input type="text" value="" name="mass[exp][]"></td>
    <td><input type="text" value="" name="mass[gender][]"></td>
  </tr>
  <tr>
    <td><span class="error_form" id="num_error_message"></span></td>
    <td><span class="error_form" id="num_error_message"></span></td>
    <td><span class="error_form" id="num_error_message"></span></td>
  </tr>
  
  <tr>
    <td><input type="text" value="" name="mass[age][]"></td>
    <td><input type="text" value="" name="mass[exp][]"></td>
    <td><input type="text" value="" name="mass[gender][]"></td>
  </tr>
  <tr>
    <td><span class="error_form" id="num_error_message"></span></td>
    <td><span class="error_form" id="num_error_message"></span></td>
    <td><span class="error_form" id="num_error_message"></span></td>
  </tr>
<br>
</table>
  <input type="submit" value="Отправить">
</form>
 </body>
 </html>

Последний раз редактировалось Katy93, 29.01.2020 в 10:55.
Ответить с цитированием
  #2 (permalink)  
Старый 29.01.2020, 11:58
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Katy93,
<!DOCTYPE html>
<html>
<head><title>Test</title>
<style type="text/css">
.err{
  border-bottom: 2px solid #F90A0A;
}
.ok{
  border-bottom: 2px solid #34F458;
}

</style>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
 $(function(e){
$("form").on("input", "table input", function() {
var error_message = "Только цифры";
var pattern = /^\d+$/;
var num = this.value.trim();
var ok = pattern.test(num);
$(this).removeClass("ok err");
if(num) {
$(this).addClass(ok ? "ok" : "err");
}
var index = $("form table input").index(this);
$("form table .error_form").eq(index).html(ok || !num ? "" : error_message);
})

   });
</script>
</head>
<body>
<form method="POST" action="form.php">

<table border="0">
  <tr>
    <td><input type="text" value="" name="mass[age][]"></td>
    <td><input type="text" value="" name="mass[exp][]"></td>
    <td><input type="text" value="" name="mass[gender][]"></td>
  </tr>
  <tr>
    <td><span class="error_form" ></span></td>
    <td><span class="error_form" ></span></td>
    <td><span class="error_form" ></span></td>
  </tr>

  <tr>
    <td><input type="text" value="" name="mass[age][]"></td>
    <td><input type="text" value="" name="mass[exp][]"></td>
    <td><input type="text" value="" name="mass[gender][]"></td>
  </tr>
  <tr>
    <td><span class="error_form" ></span></td>
    <td><span class="error_form" ></span></td>
    <td><span class="error_form" ></span></td>
  </tr>

  <tr>
    <td><input type="text" value="" name="mass[age][]"></td>
    <td><input type="text" value="" name="mass[exp][]"></td>
    <td><input type="text" value="" name="mass[gender][]"></td>
  </tr>
  <tr>
    <td><span class="error_form" ></span></td>
    <td><span class="error_form" ></span></td>
    <td><span class="error_form" ></span></td>
  </tr>
<br>
</table>
  <input type="submit" value="Отправить">
</form>
 </body>
 </html>
Ответить с цитированием
  #3 (permalink)  
Старый 30.01.2020, 10:56
Кандидат Javascript-наук
Отправить личное сообщение для Katy93 Посмотреть профиль Найти все сообщения от Katy93
 
Регистрация: 28.12.2018
Сообщений: 137

Спасибо за помощь, а как проверить поля не только на цифры, а допустим на имя или email. Вот что у меня получилось, но я думаю это не совсем правильно.
<!DOCTYPE html>
<html>
<head><title>Test</title>
<style type="text/css">
.err{
  border-bottom: 2px solid #F90A0A;
}
.ok{
  border-bottom: 2px solid #34F458;
}

</style>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$(function(e){
/***************************************************/
//Проверка на число
/***************************************************/
$("form").on("input", "table .age", function() {
var error_message = "Только цифры";
var pattern = /^\d+$/;
var num = this.value.trim();
var ok = pattern.test(num);
$(this).removeClass("ok err");
if(num) {
$(this).addClass(ok ? "ok" : "err");
}
var index = $("form table input").index(this);

$("form table .error_form").eq(index).html(ok || !num ? "" : error_message);
})
/***************************************************/
//Проверка на буквы
/***************************************************/
$("form").on("input", "table .name", function() {
var error_message = "Только буквы";
var pattern = /^[a-zA-Zа-яА-Я]*$/;
var num = this.value.trim();
var ok = pattern.test(num);
$(this).removeClass("ok err");
if(num) {
$(this).addClass(ok ? "ok" : "err");
}
var index = $("form table input").index(this);

$("form table .error_form").eq(index).html(ok || !num ? "" : error_message);
})
/***************************************************/
//Проверка на email адрес
/***************************************************/
$("form").on("input", "table .email", function() {
var error_message = "Только email";
var pattern = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
var num = this.value.trim();
var ok = pattern.test(num);
$(this).removeClass("ok err");
if(num) {
$(this).addClass(ok ? "ok" : "err");
}
var index = $("form table input").index(this);

$("form table .error_form").eq(index).html(ok || !num ? "" : error_message);
})

   });
</script>
</head>
<body>
<form method="POST" action="form.php">

<table border="0">
  <tr>
    <td><input class="age" type="text" value="" name="mass[age][]"></td>
    <td><input class="name" type="text" value="" name="mass[exp][]"></td>
    <td><input class="email" type="text" value="" name="mass[gender][]"></td>
  </tr>
  <tr>
    <td><span class="error_form" ></span></td>
    <td><span class="error_form" ></span></td>
    <td><span class="error_form" ></span></td>
  </tr>

  <tr>
    <td><input class="age" type="text" value="" name="mass[age][]"></td>
    <td><input class="name" type="text" value="" name="mass[exp][]"></td>
    <td><input class="email" type="text" value="" name="mass[gender][]"></td>
  </tr>
  <tr>
    <td><span class="error_form" ></span></td>
    <td><span class="error_form" ></span></td>
    <td><span class="error_form" ></span></td>
  </tr>

  <tr>
    <td><input class="age" type="text" value="" name="mass[age][]"></td>
    <td><input class="name" type="text" value="" name="mass[exp][]"></td>
    <td><input class="email" type="text" value="" name="mass[gender][]"></td>
  </tr>
  <tr>
    <td><span class="error_form" ></span></td>
    <td><span class="error_form" ></span></td>
    <td><span class="error_form" ></span></td>
  </tr>
<br>
</table>
  <input type="submit" value="Отправить">
</form>
 </body>
 </html>
Ответить с цитированием
  #4 (permalink)  
Старый 30.01.2020, 17:12
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Katy93,
$(function(){
$("form").on("input", "table input", function() {
var error_message = {"mass[age][]" : "Только цифры", "mass[exp][]" : "Только буквы", "mass[gender][]" : "Только email"}[this.name];
var pattern = {"mass[age][]" : /^\d+$/, "mass[exp][]" : /^[a-zA-Zа-яА-Я]*$/, "mass[gender][]" : /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/}[this.name];;
var num = this.value.trim();
var ok = pattern.test(num);
$(this).removeClass("ok err");
if(num) {
$(this).addClass(ok ? "ok" : "err");
}
var index = $("form table input").index(this);

$("form table .error_form").eq(index).html(ok || !num ? "" : error_message);
})
})
Ответить с цитированием
  #5 (permalink)  
Старый 30.01.2020, 17:13
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Katy93, лучше так - поле формы определяет обязательно ли оно для заполнения и правила проверки, а скрипт занимается проверкой.
Ответить с цитированием
  #6 (permalink)  
Старый 30.01.2020, 19:52
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

Сообщение от Katy93
как проверить поля не только на цифры, а допустим на имя или email.
Я не нашёл у вас проверку формы. Да, ваше регулярное выражение не учитывает, что есть имя «Фёдор», «Jürgen» и пр. Также не ясно, почему ваши сообщения об ошибке так далеко от проверяемого поля в разметке. (Это отменяет массу приятных вещей)

<!DOCTYPE html>
<html>
<head>
	<title>Form Validation</title>
	<style>
		.validable {
			border: 0 solid #888;
			border-bottom-width: 2px;
			padding: 0.5em;
			font: inherit;
 			outline: none;
		}
		.validable:not(:placeholder-shown):invalid {
			border-bottom-color: #f90a0a;
		}
		.validable:valid {
			border-bottom-color: #34f458;
		}
		.validable ~ .error {
			display: none;
		}
		.validable:not(:placeholder-shown):invalid ~ .error {
			display: block;
		}
		form td {
			vertical-align: top;
		}
	</style>
</head>
<body>
	<form method="POST" action="form.php">
	<table>
		<tr>
			<td>
				<input class="age validable" type="text" name="mass[age][]" placeholder="Возраст" pattern="\d{1,3}" required>
				<span class="error">Только цифры</span>
			</td>
			<td>
				<input class="name validable" type="text" name="mass[exp][]" placeholder="Имя" pattern="(?=\s*\S+)\D+" required>
				<span class="error">Только буквы</span>
			</td>
			<td>
				<input class="email validable" type="email" name="mass[gender][]" placeholder="Почта" required>
				<span class="error">Только email</span>
			</td>
		</tr>
	</table>
	<input type="submit" value="Отправить">
	</form>
</body>
</html>
Вы можете добавить динамически сколько угодно строк!

Последний раз редактировалось Malleys, 30.01.2020 в 19:59.
Ответить с цитированием
  #7 (permalink)  
Старый 31.01.2020, 09:33
Кандидат Javascript-наук
Отправить личное сообщение для Katy93 Посмотреть профиль Найти все сообщения от Katy93
 
Регистрация: 28.12.2018
Сообщений: 137

Malleys, я проверила и всё равно не могу понять как работает без js скриптов. Я например взяла и сделала дубли ячеек и протестировала ввела в каждое поле и ошибка появляется снизу над полем где я ввожу и это при том, что я не указывала уникальный идентификатор. Разве для ошибки и поля не нужен уникальный id?
Ответить с цитированием
  #8 (permalink)  
Старый 31.01.2020, 09:39
Кандидат Javascript-наук
Отправить личное сообщение для Katy93 Посмотреть профиль Найти все сообщения от Katy93
 
Регистрация: 28.12.2018
Сообщений: 137

А ещё появляется сообщение с указанием, что я не правильно ввела строку например "Адрес электронной почты должен содержать символ "@". В адресе "katerina" отсутствует символ "@"." Никакие js библиотеки я не подключала и дополнительные настройки в библиотеках я не делала.
Ответить с цитированием
  #9 (permalink)  
Старый 31.01.2020, 09:42
Кандидат Javascript-наук
Отправить личное сообщение для Katy93 Посмотреть профиль Найти все сообщения от Katy93
 
Регистрация: 28.12.2018
Сообщений: 137

Кстати, что это за символ такой "ü" как его на клавиатуре поставить?
Ответить с цитированием
  #10 (permalink)  
Старый 31.01.2020, 11:21
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

Сообщение от Katy93
я проверила и всё равно не могу понять как работает без js скриптов.
Это встроенный в HTML5 функционал для проверки форм — Form Validation API. Т. е. для работы, проверки и отправки формы скрипт не обязателен.

Сообщение от Katy93
Разве для ошибки и поля не нужен уникальный id?
Нет. Для большинства простых случаев вам достаточно возможностей HTML5 и CSS. Для ошибки и поля не нужен уникальный id, если только вы не хотите обратиться к конкретным полям через скрипт.

Сообщение от Katy93
А ещё появляется сообщение с указанием, что я не правильно ввела строку например "Адрес электронной почты должен содержать символ "@". В адресе "katerina" отсутствует символ "@"." Никакие js библиотеки я не подключала и дополнительные настройки в библиотеках я не делала.
Да, всё верно, поскольку у поля ввода указан тип type="email" и указано, что это поля обязательно для заполнения (required), то именно так работает Form Validation API по умолчанию — он показывает, какие поля заполнены неправильно! Конечно же через скрипт вы можете настроить эти сообщения, или даже использовать свой способ оповещения об ошибках.

Сообщение от Katy93
Кстати, что это за символ такой "ü" как его на клавиатуре поставить?
Буква Ü — буква, которая используется в некоторых языках, например, в немецком, эстонском и пр. Когда у вас есть клавиатура с такой буквой и выбрана раскладка языка, где есть такая буква, то вы сможете её напечатать, нажав на соответствующую клавишу! (Также на MacOS при английской раскладке вы можете нажать Option+U, а затем U, чтобы ввести ü)

Последний раз редактировалось Malleys, 31.01.2020 в 11:26.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
AngularJS: вычисление динамических полей в таблице factory_girl Библиотеки/Тулкиты/Фреймворки 0 13.06.2015 19:28
проверка полей при отправке all4me1982 Общие вопросы Javascript 6 17.03.2015 14:02
Проверка полей serrrgggeee Javascript под браузер 0 08.10.2014 15:16
Проверка полей отправляемой формы. denisOgr jQuery 6 18.10.2010 19:40
проверка полей формы!!!! DENAT Общие вопросы Javascript 0 05.06.2008 22:14