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

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

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

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

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

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

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

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

Цитата:

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

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

Цитата:

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

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

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

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

Цитата:

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

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

reportValidity?

Цитата:

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

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

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

Почему 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>

Цитата:

Сообщение от 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>

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

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

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