Добрый день! В элементе <input> есть атрибуты minlength и pattern (и д.р.), которые браузер проверяет перед отправкой формы и если они не соответствуют, браузер выведет сообщение об ошибке, а форма отправлена не будет. Вид и содержание сообщения зависит от браузера. Если <input> используется вне формы, а для отправки данных из элемента используется событие onchange, то проверка атрибутов minlength и pattern на соответствие не выполняется. Вопрос: можно ли как то заставить перед обработкой события onchange, выполнить проверку атрибута pattern, и в случае не соответствия вывести сообщение об ошибке, и не выполнять событие onchange? Или хотя бы вывести сообщение об ошибке, чтоб выглядело однообразно? Вот мой тестовый пример из 2х файлов. Файл test.php: HTML: <!DOCTYPE html> <html> <head> <title>Test</title> <meta charset="UTF-8"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> <script> function update(arr) { $.post('test2.php', arr, function(data){$('#result').html(data);}); } </script> </head> <body> <form method='post' action="test.php"> <h3>Input в форме с кнопкой типа submit</h3> <p>Введите код из двух латинских символов:</p> <input pattern="[A-Za-z]{2}" type="text" maxlength="2" name="code" value=""> <button type="submit">Отправить</button> </form> <h3>Input c onchange</h3> <p>Введите код из двух латинских символов:</p> <input pattern="[A-Za-z]{2}" type="text" maxlength="2" name="code" value="" onchange="update({code: value})"> <h3>Результат</h3> <p id="result"> <?php if (isset($_POST['code'])) echo "Код: {$_POST['code']}"; ?> </p> </body> </html> Файл test2.php: PHP: <?php echo "Код: {$_POST['code']}";
Делать это поле в другой форме, при onchange - можно отправлять форму - следовательно получать нужные ошибки
@it75, или так: Код (Javascript): function update(e, arr) { if (!e.target.checkValidity()) { e.target.reportValidity(); return; } console.log('arr: ', arr); } Чуть подправив при этом атрибут onchange="update(event, {code: value})" --- Добавлено --- Спойлер HTML: <!DOCTYPE html> <html> <head> <title>Test</title> <meta charset="UTF-8"> <script> function update(e, arr) { if (!e.target.checkValidity()) { e.target.reportValidity(); return; } console.log('arr: ', arr); } </script> </head> <body> <h3>Input c onchange</h3> <p>Введите код из двух латинских символов:</p> <input id="t_input" pattern="[A-Za-z]{2}" type="text" maxlength="2" name="code" value="" onchange="update(event, {code: value})"> </p> </body> </html>