Как проверить input на заполненность js
Перейти к содержимому

Как проверить input на заполненность js

  • автор:

Проверка форм в JavaScript

Примеры проверок, которые возможно реализовать с помощью JavaScript:

  • Было ли данное поле заполнено;
  • В правильном ли формате пользователь указал свой адрес или email в соответствующем поле;
  • Совпадают ли значения введенные в два различных поля (часто используется для полей с паролем);
  • Не превышает ли значение введенное в поле максимально допустимую длину и т.д.

Проверка форм в JavaScript возможна благодаря событию onSubmit.

Если у тэга form атрибут onsubmit=»return true» форма будет отправлена на сервер, если же onsubmit=»return false», то форма на сервер отправлена не будет.

      Имя:  
e-mail:

Wisdomweb.ru © 2024.
Все права защищены. Любое использование материалов данного сайта без разрешения администрации запрещено.
Онлайн учебники по HTML, HTML5, CSS, JavaScript, AJAX, HDOM, jQuery.

Проверка заполненности поля JS

Необходимо проверить заполненность полей и запретить отправку формы, если есть пустые скопировал пример отсюда: https://www.howtomake.com.ua/front/simple-check-form-field-jquery.html , но почему-то вылетает ошибка(это не функция, хотя у него все работает):

form.find(‘.empty_field’).size();

пытался заменить на свое:

 if(form.find(".empty_field")) < var sizeEmpty =1; >else < var sizeEmpty =0; >alert(sizeEmpty); 

но тогда даже если на странице нету элементов с таким классом, в переменную падает 1, что может быть не так?

Проверка input на заполненость

Author24 — интернет-сервис помощи студентам

Здравствуйте. Сейчас изучаю js и столкнулся с небольшой проблемой. У меня есть простая форма html, и скрипт который выгружает данные из этой формы в ексель сделанный с помощью сервиса APISpreadSheets. И вот когда я пытаюсь добавить к input проверку, что бы он был заполнен, скрипт с отправкой данных формы перестает работать, хотя без этой проверки, все работает отлично. Я уже не знаю что с этим делать, пробовал разные варианты проверки, через js, пробовал через тег required в html(появляется уведомление о том что нужно заполнить поле, но форму отправляется). Я уже не знаю что делать и как быть. Хочу разобраться в этом из принципа. Подскажите, может есть какое решение

1 2 3
form id="myForm" name="myForm" action="#" onsubmit="required()"> input type="text" name="spec_high" id="spec_high" /> input type="Submit" name="submit" value="Submit"/>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
function required(){ if(document.getElementById("spec_high").value.length == 0) { alert("empty") }else{ SubForm()}} function SubForm (){ $.ajax({ url:"https://api.apispreadsheets.com/data/12052/", type:"post", data:$("#myForm").serializeArray(), success: function(){ alert("Form Data Submitted :)") }, error: function(){ alert("There was an error :(") } }); }

Проверка полей формы на заполненность при помощи jQuery и vanilla js

Лучший хостинг для CMS

Проверка полей формы на заполненность

Верстка

Автор Алексей На чтение 5 мин Просмотров 1к. Опубликовано 08.09.2023 Обновлено 07.09.2023

Сегодня, расскажу как сделать простенькую проверку полей формы на заполненность при помощи jQuery и vanilla js, чтобы кнопка отправки была не активной, пока не будут заполнены все обязательные поля!

Поля можно сделать обязательными и стандартный html атрибутом required, пример:

Если пользователь, что то не заполнит с данным атрибутом и нажмет на кнопку отправить форму, то увидит, примерно такое сообщение:

Вид сообщения об обязательном поле

Это все круто, но передо мной в одном из проектов, нужно было сделать неактивной кнопку отправки, пока не будут заполнены все обязательные поля форм (для нескольких форм на странице). И т.к. на сайте был подключен jQuery, написал код проверки под него и решил им поделится с вами. И за одно написал его альтернативу на чистом JS.

Для примера накидаем 2 простенькие html форм:

HTML код форм

         

Здесь к каждой форме (тегу form ), которую нужно проверять назначен класс rp , и к input-там обязательным для заполнения (для проверки) присвоен класс rpole — т.е. мы будем проверять только поля с этим классом. И к кнопкам отправки присвоено по 2 класса btn-submit (для стилизации кнопки) и disabled (для скрипта).

CSS оформление форм

.rp label .rp input .rp input:focus .rp .btn-submit .rp .btn-submit:hover .rp .btn-submit:active .rp .btn-submit.disabled,.rp .btn-submit.disabled:hover

Стандартное оформление форм, объяснять по сути нечего.

jQuery скрипт

(function( $ ) < $(function() < $('.rp').each(function()< var form = $(this), btn = form.find('.btn-submit'); form.find('.rpole').addClass('field-is-not-filled'); // Функция проверки полей формы function checkInput()< form.find('.rpole').each(function()< if($(this).val() != '')< $(this).removeClass('field-is-not-filled'); >else < $(this).addClass('field-is-not-filled'); >>); > // Функция подсветки незаполненных полей function lightEmpty()< form.find('.field-is-not-filled').css(); setTimeout(function()< form.find('.field-is-not-filled').removeAttr('style'); >,500); > setInterval(function() < checkInput(); var sizeEmpty = form.find('.field-is-not-filled').size(); if(sizeEmpty >0) < if(btn.hasClass('disabled'))< return false >else < btn.addClass('disabled') >> else < btn.removeClass('disabled') >>,500); btn.click(function() < if($(this).hasClass('disabled'))< lightEmpty(); return false >else < form.submit(); >>); >); >); >)( jQuery );

Скрипт с пояснениями и довольно простой.

Код скрипта на vanilla js

Если вы не используете в проекте jQuery и пишите все на чистом JS без зависимостей, тогда используйте следующий код:

(function() < var rpForms = document.querySelectorAll('.rp'); rpForms.forEach(function(form) < var btn = form.querySelector('.btn-submit'); var rpoleInputs = form.querySelectorAll('.rpole'); rpoleInputs.forEach(function(input) < input.classList.add('field-is-not-filled'); >); function checkInput() < rpoleInputs.forEach(function(input) < if (input.value != '') < input.classList.remove('field-is-not-filled'); >else < input.classList.add('field-is-not-filled'); >>); > function lightEmpty() < var emptyInputs = form.querySelectorAll('.field-is-not-filled'); emptyInputs.forEach(function(input) < input.style.borderColor = '#d8512d'; >); setTimeout(function() < emptyInputs.forEach(function(input) < input.removeAttribute('style'); >); >, 500); > setInterval(function() < checkInput(); var sizeEmpty = form.querySelectorAll('.field-is-not-filled').length; if (sizeEmpty >0) < if (btn.classList.contains('disabled')) < return false; >else < btn.classList.add('disabled'); >> else < btn.classList.remove('disabled'); >>, 500); btn.addEventListener('click', function() < if (btn.classList.contains('disabled')) < lightEmpty(); return false; >else < form.submit(); >>); >); >)();

В итоге у вас должны получиться примерно такие формы:

Пример работы форм

У формы где заполнены все обязательные поля активная кнопка отправки, а в форме где не заполнены все обязательные поля кнопка отправки не активна.

Скачать пример

Заключение

В отличии от аналогичных скриптов, которые я нашел в интернете, данный скрипт проверяет все формы на странице с присвоенным классом .rp и в этих формах проверяет только определенные поля к которым присвоен класс rpole .

Надеюсь Вам пригодится данный скромный скриптик в ваших проектах.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *