Форум

рони · #11 (**permalink**) 31.01.2020, 11:36

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

"ü" как его на клавиатуре поставить?

переключится на английский, включить Num Lock, зажать Alt, набрать 0252 на числовой панели.

Katy93 · #12 (**permalink**) 01.02.2020, 09:06

Спасибо, что объяснили. Я всё же решила всё таки воспользоваться только проверки с цифрами:

<!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><select id="gender1" name="driver[gender][]">
           <option label="-"></option>
           <option value="1">Мужской</option>
           <option value="0">Женский</option>
       </select></td>
  </tr>
  <tr>
    <td><span class="error_form" ></span></td>
    <td><span class="error_form" ></span></td>
    <td></td>
  </tr>

  <tr>
    <td><input type="text" value="" name="mass[age][]"></td>
    <td><input type="text" value="" name="mass[exp][]"></td>
    <td><select id="gender1" name="driver[gender][]">
           <option label="-"></option>
           <option value="1">Мужской</option>
           <option value="0">Женский</option>
       </select></td>
  </tr>
  <tr>
    <td><span class="error_form" ></span></td>
    <td><span class="error_form" ></span></td>
    <td></td>
  </tr>

  <tr>
    <td><input type="text" value="" name="mass[age][]"></td>
    <td><input type="text" value="" name="mass[exp][]"></td>
    <td><select id="gender1" name="driver[gender][]">
           <option label="-"></option>
           <option value="1">Мужской</option>
           <option value="0">Женский</option>
       </select></td>
  </tr>
  <tr>
    <td><span class="error_form" ></span></td>
    <td><span class="error_form" ></span></td>
    <td></td>
  </tr>
<br>
</table>
  <input type="submit" value="Отправить">
</form>
 </body>
 </html>

Изменила кое-что третье поле с выбором пола не обязательно сделала из него список.
Можно как нибудь при отправке формы сообщать пользователю какие поля он ещё не заполнил?

Например он создал несколько динамических полей и не заполнил их потом нажимает submit и ему выдаёт сообщение под каждым полем красным "Только цифры". И тут выбор у пользователя либо удалить лишнее либо заполнить их.

рони · #13 (**permalink**) 01.02.2020, 11:27

Katy93,
может проще required добавить в input?

Katy93 · #14 (**permalink**) 01.02.2020, 12:13

Как пример ранее, со стилями? HTML 5 и CSS

рони · #15 (**permalink**) 01.02.2020, 12:15

Katy93,
<td><input type="text" value="" name="mass[age][]" required ></td>

Katy93 · #16 (**permalink**) 01.02.2020, 14:09

Проверила скрипт:

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

</style>

</head>
<body>
<form method="POST" action="form.php">

<table border="0">
  <tr>
    <td><input type="text" value="" name="mass[age][]" pattern="\d{1,3}" required></td>
    <td><input type="text" value="" name="mass[exp][]" pattern="\d{1,3}" required></td>
    <td><select id="gender1" name="driver[gender][]">
           <option label="-"></option>
           <option value="1">Мужской</option>
           <option value="0">Женский</option>
       </select></td>
  </tr>
  <tr>
    <td><span class="error_form" ></span></td>
    <td><span class="error_form" ></span></td>
    <td></td>
  </tr>

  <tr>
    <td><input type="text" value="" name="mass[age][]" pattern="\d{1,3}" required></td>
    <td><input type="text" value="" name="mass[exp][]" pattern="\d{1,3}" required></td>
    <td><select id="gender1" name="driver[gender][]">
           <option label="-"></option>
           <option value="1">Мужской</option>
           <option value="0">Женский</option>
       </select></td>
  </tr>
  <tr>
    <td><span class="error_form" ></span></td>
    <td><span class="error_form" ></span></td>
    <td></td>
  </tr>

  <tr>
    <td><input type="text" value="" name="mass[age][]" pattern="\d{1,3}" required></td>
    <td><input type="text" value="" name="mass[exp][]" pattern="\d{1,3}" required></td>
    <td><select id="gender1" name="driver[gender][]">
           <option label="-"></option>
           <option value="1">Мужской</option>
           <option value="0">Женский</option>
       </select></td>
  </tr>
  <tr>
    <td><span class="error_form" ></span></td>
    <td><span class="error_form" ></span></td>
    <td></td>
  </tr>
<br>
</table>
  <input type="submit" value="Отправить">
</form>
 </body>
 </html>

К сожалению не подходит дело в том что эта проверка работает только в том случае если нажата кнопка submit. А у меня до этой кнопки нужно ещё добраться. Дело в том что у меня постраничная форма, в начале большая часть скрыта стилями display: none;, при нажатии кнопки далее открывается новая часть формы $("#second").show();, а старая закрывается $("#first").hide();.

Вообщем использовать html5 валидацию тут не получится.

laimas · #17 (**permalink**) 01.02.2020, 16:23

Сценарий, это:

1) разбудили проверить поля
2) проверяет поля:
-если поле имеет атрибут required, то обязателен для заполнения
-если имеет pattern, то проверяется по этому шаблону, иначе по типу поля
-если поле не обязательно для заполнения, но заполнено, то проверяется по типу поля, но могут быть и пользовательские определения
-сообщения об ошибках извлекаются из data атрибутов
3) сделал работу и спать

Это в конкретном сценарии можно шаблоны определять, какие-то сообщения, а в вашем случае так поступать, это вырастить монстра.

Katy93 · #18 (**permalink**) 01.02.2020, 17:50

В каком моём случае, я что-то не совсем поняла?

laimas · #19 (**permalink**) 01.02.2020, 18:06

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

В каком моём случае, я что-то не совсем поняла

В вашем случае html5 валидация так и останется и будет нужна при отправлении формы, а пользовательская проверка инициализироваться по смене элементов формы. Для скрипта атрибуты их, это есть и правила, и данные. То есть, если вот так подходить:

var error_message = "Только цифры";
var pattern = /^\d+$/;

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

И либо this.value.... либо сразу $(this), коли большую часть вы выполняете на JQ, и $(this).val(), с установкой $.valHooks, чтобы при проверке значения уже были очищены от крайних пробелов.

Katy93 · #20 (**permalink**) 01.02.2020, 20:00

И как же мне html 5 валидацию применить если она привязана только к submit, а submit доступно только будет на следующем этапе. Т.е. после нажатия кнопки "Следующая" или мне из этой кнопки (следующая) сделать submit, тогда получится несколько submit в одной форме.

Форум

Справочник

Discord чат

Курсы javascript