29.01.2020, 10:52
|
|
Кандидат Javascript-наук
|
|
Регистрация: 28.12.2018
Сообщений: 138
|
|
|
Проверка динамических полей на валидацию
Как проверить поля на валидацию, которые добавляются в форму динамически, раньше я получала 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.
|
|
29.01.2020, 11:58
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
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>
|
|
30.01.2020, 10:56
|
|
Кандидат Javascript-наук
|
|
Регистрация: 28.12.2018
Сообщений: 138
|
|
Спасибо за помощь, а как проверить поля не только на цифры, а допустим на имя или 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>
|
|
30.01.2020, 17:12
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
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);
})
})
|
|
30.01.2020, 17:13
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,990
|
|
|
Katy93, лучше так - поле формы определяет обязательно ли оно для заполнения и правила проверки, а скрипт занимается проверкой.
|
|
30.01.2020, 19:52
|
 |
Профессор
|
|
Регистрация: 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.
|
|
31.01.2020, 09:33
|
|
Кандидат Javascript-наук
|
|
Регистрация: 28.12.2018
Сообщений: 138
|
|
|
Malleys, я проверила и всё равно не могу понять как работает без js скриптов. Я например взяла и сделала дубли ячеек и протестировала ввела в каждое поле и ошибка появляется снизу над полем где я ввожу и это при том, что я не указывала уникальный идентификатор. Разве для ошибки и поля не нужен уникальный id?
|
|
31.01.2020, 09:39
|
|
Кандидат Javascript-наук
|
|
Регистрация: 28.12.2018
Сообщений: 138
|
|
|
А ещё появляется сообщение с указанием, что я не правильно ввела строку например "Адрес электронной почты должен содержать символ "@". В адресе "katerina" отсутствует символ "@"." Никакие js библиотеки я не подключала и дополнительные настройки в библиотеках я не делала.
|
|
31.01.2020, 09:42
|
|
Кандидат Javascript-наук
|
|
Регистрация: 28.12.2018
Сообщений: 138
|
|
|
Кстати, что это за символ такой "ü" как его на клавиатуре поставить?
|
|
31.01.2020, 11:21
|
|
Профессор
|
|
Регистрация: 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.
|
|
|
|
