На нашем сайте мы используем cookie для сбора информации технического характера и обрабатываем IP-адрес вашего местоположения. Продолжая использовать этот сайт, вы даете согласие на использование файлов cookies. Здесь вы можете узнать, как мы пользуемся файлами cookies.
Я согласен
логотип upread.ru

Required и onclick


Итак, вы создали на своем сайте форму обратной связи, чтобы посетители могли отправлять вам сообщения. Также вы добавили в неё атрибут required – чтобы эти же посетители не могли отправлять незаполненную форму с пустым полями. Время шло, и вы, согласно новым веяниям, сделали отправку вашей формы без перезагрузки страницы, с помощью ajax и обработки события onclick. И вдруг заметили, что required перестал работать. В чем же дело?

Дело в том, что форму вы сейчас отправляете не с помощью HTML, а с помощью JS, поэтому не происходит вызова метода submit(), в котором, собственно говоря, и проверяется корректность заполнения полей формы. При отправке с помощью JS, действия по проверке формы пропускаются, поэтому их нужно реализовывать самостоятельно на JS – с помощью checkValidity(). Рассмотрим конкретный пример.

HTML-код формы:

<form id="contact-form" name="contact-form" action="_self">
Сообщение:<br />
<textarea type="text" id="ftext" name="ftext" rows="4"  required > <textarea>
<button type="submit" id="submit" onClick="saveform (this.form); return false;">Отправить</button>
</form>
Скрипт по отправке формы и проверяющий заполнение полей (замена required):

function saveform (data)
{
  var isValidForm = document.forms['contact-form'].checkValidity();
    if (isValidForm)
    {
	var ftext = data.ftext.value;
    $.post('saveser.php',{ ftext:ftext},function(data){ },'json');	
	window.alert('Спасибо! Ваше сообщение уже у нас в ящике!');
    }
    else
    {
    window.alert('Вы заполнили не все поля!');
    }
}
Вот так можно заменить required на JS. Я привел сразу же пример отправки данных ajax-ом в файл saveser.php, если же у вас реализована своя функция, то замените её на вот эту строку:

document.forms['contact-form'].submit();
Также стоит отметить, что если полей в форме несколько (а так оно обычно и есть), то можно реализовать проверку отдельных полей. Можно также выводить сообщение не встроенным алертом, а придумать свое окно – возможностей масса. Если вам требуется реализовать что-то подобное на своем сайте, то вы всегда можете обратиться к мне – up777up@yandex.ru – за небольшую плату вам будет оказана быстрая помощь по любым проблемам с сайтом.




тегизаметки, javascript, валидация, html, скрипты для сайта





Отправляя сообщение я подтверждаю, что ознакомлен и согласен с политикой конфиденциальности данного сайта.




Рецензия на книгу Образцов Константин Молот ведьм
Инъекции SQL: основы защиты


© upread.ru 2013-2019
При перепечатке активная ссылка на сайт обязательна.
Задать вопрос
письмо
Здравствуйте! Вы можете задать мне любой вопрос. Если не получается отправить сообщение через эту форму, то пишите на почу up777up@yandex.ru
Отправляя сообщение я подтверждаю, что ознакомлен и согласен с политикой конфиденциальности данного сайта.