Javascript-форум - Проверка динамических полей на валидацию

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Проверка динамических полей на валидацию (https://javascript.ru/forum/misc/79366-proverka-dinamicheskikh-polejj-na-validaciyu.html)

Проверка динамических полей на валидацию

Как проверить поля на валидацию, которые добавляются в форму динамически, раньше я получала 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,

<!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>

Спасибо за помощь, а как проверить поля не только на цифры, а допустим на имя или 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>

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);
})
})

Katy93, лучше так - поле формы определяет обязательно ли оно для заполнения и правила проверки, а скрипт занимается проверкой.

Цитата:

Сообщение от 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, я проверила и всё равно не могу понять как работает без js скриптов. Я например взяла и сделала дубли ячеек и протестировала ввела в каждое поле и ошибка появляется снизу над полем где я ввожу и это при том, что я не указывала уникальный идентификатор. Разве для ошибки и поля не нужен уникальный id?

А ещё появляется сообщение с указанием, что я не правильно ввела строку например "Адрес электронной почты должен содержать символ "@". В адресе "katerina" отсутствует символ "@"." Никакие js библиотеки я не подключала и дополнительные настройки в библиотеках я не делала.

Кстати, что это за символ такой "ü" как его на клавиатуре поставить?

Цитата:

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

я проверила и всё равно не могу понять как работает без js скриптов.

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

Цитата:

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

Разве для ошибки и поля не нужен уникальный id?

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

Цитата:

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

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

Цитата:

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

Кстати, что это за символ такой "ü" как его на клавиатуре поставить?

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