Возможно ли сделать валидацию формы на jquery, а отправить на php?

Question

[Константин Биржаков]

Для примера есть такая форма, с полем типа file:

<div id="my_error"></div><br>
<form id="my_form" action="server.php" enctype="multipart/form-data" method="post"><br>
Ваш НИК <input type="text" name="username"><br>
Ваш E-mail <input type="text" name="email"><br>
Прикрепите файл <input type="file" name="userfile"><br>
<input type="hidden" name="action" value="sendform"><br>
<input type="submit" name="OK"><br>
</form><br>

Делаю валидацию на jquery:

$(document).ready(function(){<br>
$('#my_form').submit( function (e){<br>
        e.preventDefault();<br>
        var str = $(this).serialize();<br>
        $.ajax({<br>
            type: "POST",<br>
            url: "/ajax.php",<br>
            data: str,<br>
            success: function(msg) {<br>
                $("#my_error").ajaxComplete(function(event, request, settings) {<br>
                    if ( msg == 'OK' ) {<br>
                        // ???? Здесь мне надо отправить форму на server.php<br>
                    }<br>
                    else {<br>
                        $(this).html(msg);<br>
                    }<br>
                });<br>
            }<br>
        });<br>
        return false;<br>
    });<br>
});<br>

Саму валидацию осуществляет файлик ajax.php

if ( $_POST['action'] && $_POST['action'] == 'sendform' ) {<br>
$error = '';<br>
// опустим очистку переменной $_POST['username'] от мусора, это не важно в данном случае<br>
if ( !$_POST['username'] ) $error .= "<li>Не заполнен НИК</li>";<br>
if ( $_POST['username'] )  {<br>
// тут коннектимся к базе, проверяем занятость ника, может ли юзер вообще посылать файлы и так далее и так далее<br>
}<br>
if ( !$error ) echo "OK";<br>
else echo "<div class=\"err\">Ошибка! ".$error."</div>";<br>
}<br>

Вопрос такой: возможно ли соединить две технологии? Проверять данные с помощью ajax, а отправлять данные и вставлять в базу на server.php? Разумеется, у меня в server.php дублируется вся валидация, однако мне хотелось бы сделать скрипт более удобным для юзера, без перезагрузки страницы в случае ошибок.

Answer 1

[pxx]

Можно так:

$('#my_form').submit( function (e, data){
  if (data == 'silent') return true;
  e.preventDefault();
  ...
  if (valid) {
    $('#my_form').trigger('submit', 'silent');
  }
});

Comments

[Константин Биржаков]

Шикарно! Работает!

[pxx]

Хорошо :)
Значит можете пометить, как правильный ответ

Answer 2

[Вячеслав Голованов]

Если я правильно понял вопрос, то можно сначала через аякс получать ответ от ajax.php
Если он равен, допустим, «ОК», тогда отправляем POST на server.php
В ином случае выдаём результат работы ajax.php в браузер.

Comments

[Константин Биржаков]

Да! Точно так

[sqrt]

А что нельзя сразу отправить на server.php и там проверить? И если ошибка вернуть ее?

[scorp13]

Написал же человек, что хотелось бы без перезагрузки.

[Fr3nzy]

Так а при чем тут перезагрузка? Делаем валидацию, валидация не проходит — отдаем респонсу JS'у с ошибками. Прошла валидация — делаем редирект куда-либо, либо просто делаем что-то с DOM'ом.

[Fr3nzy]

Извините, *респонс :)

[Eugene]

Вам нужно просто на server.php посылать ajax-запрос для проверки.

ajax.php не нужна, это лишняя точка входа.

Проверять, что это ajax, можно целой кучей вариантов, от параметра ?ajax=1 до проверки заголовка X-Requested-With на == XMLHttpRequest

Файлы через ajax также можно отправлять, используйте ajaxfileupload.js для jquery.

Answer 3

[winbackgo]

Используйте готовые решения для проверки формы, например bassistance.de/jquery-plugins/jquery-plugin-validation/.

Comments

[Константин Биржаков]

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

[Сергей Протько]

Возможно все.

[Константин Биржаков]

Благодарю.

[winbackgo]

Это почему же? JS должен проверить поля которые можно проверить на клиенте. Далее, если все ок, проверяем на сервере. При ошибке возвращаем форму с ошибками (можно вернуть только ошибки в формате json, но это сложнее и теряется функционал nojs — тут уже надо смотреть по обстоятельствам). Файле на сервере, вы не должны вываливать ошибки в поток, а собрать их в массив, и потом проверить, если массив пустой — ошибок нет, в противном случае сгенерировать снова форму с прописанными ошибками и отправить клиенту. А jquery-validation как дополнение, вполне себе может работать на клиенте — главное структуру (верстку) ошибок сделать одинаково (на сервере и на клиенте). Еще, если вы файл грузите через file api то можно расширить плагин и проверить и часть информации файла.

[Константин Биржаков]

Мне не проверить на клиенте данные, которые хочу проверять. Для этого мне надо соединение с базой данных.

[winbackgo]

Смотрите примеры и документацию, там все это есть, и remote validation тоже.

[winbackgo]

Потом, я не предлагаю вам делать проверку только на клиенте, проверка на клиенте должна служить лишь дополнительным удобством для пользователя.

[Константин Биржаков]

Благодарю за ссылку! Я попробую разобраться с примером и документацией.

Answer 4

[Alex Shinkevich]

Первое что приходит в голову, вместо:

// ???? Здесь мне надо отправить форму на server.php

добавить
return true;

Comments

[Alex Shinkevich]

Ой, сорри как-то не заметил вложенных функций. Совсем с ума сошел. Но смысл понятен, вместо false, возвращайте true при успешной проверке

[Сергей Протько]

Нет, если форма отправляется силами Ajax то только return false что бы не допустить повторной отправки. Просто если валидацию не прошло — return false перед AJAX отправкой.

[Константин Биржаков]

return true не работает.

[Alex Shinkevich]

Здесь средствами ajax форма сериализуется и отправляется на отдельный url. Здесь же нужно при success проверке вернуть true. Т.е. что-то типа того: pastebin.com/FCmehdEL

[Константин Биржаков]

Спасибо! Мне осталось неясным, что делать при is_need_submit = true;. Как заставить данные поехать в этом случае на server.php?

[Alex Shinkevich]

Так собственно она дальше пойдет по url из <form action=«url»…

Т.е. api.jquery.com/submit/ функция jQuery('some_form').submit(true) — отправляет данные, jQuery('some_form').submit(false) — наоборот отключает возможность отправить.

Так и здесь вы при событии onsubmit — отключаете отправку данных по form-action, сериализируете форму и засылаете ее на проверку по ajax, если все гуд — разрешаете отправку… Как-то так

Answer 5

[Сергей Протько]

Вопервых да, можете.

Во вторых есть целая гора готовых плагинова для jQuery.

Во третьих что бы было вообще все ништяк, погуглите на тему аттрибута required и input type=«email» для более удобной валидации в современных браузерах. Для IE есть фолбэк скрипты.

Валидация непосредственно файлов возможна, если браузер поддерживает FileAPI. Тобиш все мажорные версии браузеров (IE7-9 не поддерживают, 10-ый не уверен, но вроде было в табличках).