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, скрипты для сайта