Форум

laimas · #21 (**permalink**) 02.02.2020, 05:51

В общем-то существуют и такие сценарии, когда сервер принимает данные порциями. Нет, нативная проверка полей будет при отправлении, но ведь кроме этого будут работать и css определения для полей. Хотя можно и отказаться от них, и сделать посредством метки к полю и ее :before, :after добавить иконки на поле слева, флажков справа при выполнении условий ввода, и прочих красивостей.

А пользовательская "до", что там у вас кнопка определенного этапа, вот она и должна запускать функцию проверки. А функция, по сути, простая как валенок - ее аргумент, это произвольное количество полей (или указание где их получить), которые она обходит в цикле и выполняет то о чем писалось выше. Завтра вам нужна будет другая форма, а функцию проверки при этом изменять не придется.

рони · #22 (**permalink**) 02.02.2020, 08:29

Katy93,
форма пошаговая обязательные поля

Katy93 · #23 (**permalink**) 03.02.2020, 09:26

Я нашла решение с помощью библиотеки jquery.validate.min.js. Мой код можно посмотреть по этой ссылке. https://codepen.io/Smith37/pen/qBEeRer

Katy93 · #24 (**permalink**) 03.02.2020, 09:29

Проверку с помощью регулярных выражений например на цифры, позже решу этот вопрос.

рони · #25 (**permalink**) 03.02.2020, 09:42

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

Проверку с помощью регулярных выражений например на цифры,

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

решение с помощью библиотеки jquery.validate.min.js.

примеры добавления своих методов валидации в плагин validate по ссылке ниже
validate последовательное заполнение формы

laimas · #26 (**permalink**) 03.02.2020, 15:22

Все эти плагины с "железной привязкой" жуть да и только.

Malleys · #27 (**permalink**) 04.02.2020, 12:28

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

Нет, нативная проверка полей будет при отправлении

reportValidity?

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

Проверку с помощью регулярных выражений например на цифры, позже решу этот вопрос.

атрибут pattern? Или type="number"?

Katy93 · #28 (**permalink**) 05.02.2020, 10:44

Почему placeholder установленный на дате с помощью маски js постоянно дублируется до бесконечности?
Скриншот:

Код:

<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.min.js"></script>
<script src="jquery.maskedinput.js"></script>
<style>
   #date {
    width: 500px; /* Ширина поля в пикселах */
   } 
  </style>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(e){
 
   $("#Phone").mask("(999) 999-9999");
   $("#date").mask("99.99.9999",{placeholder:"дд.мм.гггг"});
});
</script>
<form id="cmaForm" action="" method="post">
<p><label>Phone Number:</label><input name="Phone" id="Phone" class="pageRequired" maxlength="254" 
title="Номер телефона"></p>
<p><label>Date:</label>
    <input type="text" name="date" id="date" class="sum pageRequired" title="Дата"></p>
<input type="submit" class="submitbutton" value="Submit">
</form>
</html>
</body>

рони · #29 (**permalink**) 05.02.2020, 11:35

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

постоянно дублируется до бесконечности?

<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.maskedinput/1.4.1/jquery.maskedinput.min.js"></script>
<style>
   #date {
    width: 500px; /* Ширина поля в пикселах */
   }
  </style>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(e){

   $("#Phone").mask("(999) 999-9999");
   $("#date").mask("99.99.9999",{placeholder:"дд.мм.гггг"});
});
</script>
<form id="cmaForm" action="" method="post">
<p><label>Phone Number:</label><input name="Phone" id="Phone" class="pageRequired" maxlength="254"
title="Номер телефона"></p>
<p><label>Date:</label>
    <input type="text" name="date" id="date" class="sum pageRequired" title="Дата"></p>
<input type="submit" class="submitbutton" value="Submit">
</form>
</body>
</html>

Katy93 · #30 (**permalink**) 05.02.2020, 12:24

С библиотекой, что-то не так подключила вашу версию.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.maskedinput/1.4.1/jquery.maskedinput.min.js"></script>

Всё заработало.

Форум

Справочник

Discord чат

Курсы javascript