Модераторы: Sardar, Aliance
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Юзабильная валидация форм с полем file, Сперва проверить данные на клиенте 
:(
    Опции темы
KonstRuctor
Дата 16.7.2012, 11:18 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


Профиль
Группа: Участник
Сообщений: 245
Регистрация: 31.3.2006
Где: Россия, Санкт-Пет ербург

Репутация: нет
Всего: нет



Всем привет!
Продолжаю свои изыскания по построениею юзабильных форм. Сперва опишу задачу.
Есть форма, где юзеру предлагается заполнить несколько полей и прикрепить файл.
Задача: проверить введенные данные в фоновом режиме, если все ОК, отправить форму на сервер,
где уже будет аплоад и проверка файла, а также вторичная серверная проверка данных, чтобы нельзя было отправить с выключенным JavaScript.
Итак, допустим, есть форма:
Код

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

Форма проверяется с помошью jquery:
Код

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

И серверный файлик ajax.php, где происходит проверка
Код

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

Теперь мой вопрос.
У меня не получается разделить работу на две части -- заставить jquery заниматься ТОЛЬКО валидаций полей,
и в случае ошибки показывать их, больше ничего не делая. В моем алгоритме получается,
что ajax берет на себя и серверную часть, в случае валидации обрабатывая форму.

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

Применять плагины аплоада на ajax не вариант, аплоад делается на php по-старинке в файле server.php, это работает
и переделываться не будет.

Есть ли решение данной проблемы по нужному мне алгоритму? Именно валидация полей на jquery и ajax.php,
а в случае успеха – обработка формы на server.php?
Спасибо! 
PM MAIL WWW ICQ   Вверх
Aliance
Дата 16.7.2012, 13:47 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


I ♥ <script>
****


Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 17
Всего: 137



Как я понимаю у вас валидация на сервере написана и вы ее вызываете через ajax-запрос. Обычно же валидируют на самом js. Например здесь я расписывал простейшие примеры валидации форм.
PM MAIL WWW ICQ Skype   Вверх
KonstRuctor
Дата 16.7.2012, 16:20 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


Профиль
Группа: Участник
Сообщений: 245
Регистрация: 31.3.2006
Где: Россия, Санкт-Пет ербург

Репутация: нет
Всего: нет



Как на чистом JS сделать валидацию НИКа юзера? 
Ну или любой другой вещи, которую надо сравнивать с полем из базы?
Есть еще один момент -- даты. Предположим, форма для юзера, где он вводит какие-то даты.
Мне удобнее делать валидацию дат на связке php+mysql, здесь можно взять из базы
каку-то отправную дату и с неу сравнивать, можно взять диапазон дат и сравнивать его с базой и т.д.

Поэтому идея такая -- валидация всех полей на jquery, в случае успеха – поехали на сервер.
Это было бы просто шикарно, но мне никак не получается увязать эти две технологии...
PM MAIL WWW ICQ   Вверх
Aliance
Дата 17.7.2012, 09:50 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


I ♥ <script>
****


Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 17
Всего: 137



Предлагаю вам посмотреть на валидацию одного поля немного по-другому: поле прошло валидацию, если выполнены все условия (от 0 и до бесконечности). Например, в случае с полем никнейма, первое условие, что оно обязательно к заполнению. Это на чистом JS не вызывает проблем? Окей, если условие выполнено поехали дальше, например длина не меньше 3 символов. Это я так понимаю тоже легко сделать на JS? Дальше, только латиница и какие-то определенные спецсимволы. Проверяем - все окей, дальше шлем ajax-ом ник и там проверяем ТОЛЬКО его занятость в БД. Если ник свободен - присылаем что-то типа {response:true,error:''} и тем самым даем понять скрипту что все условия выполнены - поле прошло валидацию.
PM MAIL WWW ICQ Skype   Вверх
KonstRuctor
Дата 17.7.2012, 10:24 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


Профиль
Группа: Участник
Сообщений: 245
Регистрация: 31.3.2006
Где: Россия, Санкт-Пет ербург

Репутация: нет
Всего: нет



Спасибо!
Моя проблема – я не понимаю синтаксиса, скорее даже потенциальной возможности
при успехе success: function(msg), если этот самый msg == "OK"
передать управление форме и отправить ее на server.php со всеми данными.
Возможно ли это? Если возможно, каков синтаксис?
Огромное спасибо!
PM MAIL WWW ICQ   Вверх
Aliance
Дата 17.7.2012, 11:20 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


I ♥ <script>
****


Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 17
Всего: 137



Да не делают так, это не самый оптимальный вариант.
Лучше сделать валидацию полей по onchange, а в onsubmit например вставить проверку были ли ошибки при валидации onchange: если нет - ничего не делаем, если были - прерываем выполнение события (event.preventDefault()). Если не ответил на вопрос - опиши на псевдоязыке, что хочется.
PM MAIL WWW ICQ Skype   Вверх
KonstRuctor
Дата 18.7.2012, 00:10 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


Профиль
Группа: Участник
Сообщений: 245
Регистрация: 31.3.2006
Где: Россия, Санкт-Пет ербург

Репутация: нет
Всего: нет



Есть решение! Помогли на Хабре: http://habrahabr.ru/qa/21692/
Код

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

Прекрасно работает, это именно то, что мне было нужно.
Теперь я научился делать гибкую валидацию форм как с полем file, так и без него.
Для меня это просто прорыв какой-то.
Спасибо всем, кто откликнулся на призыв о помощи!
PM MAIL WWW ICQ   Вверх
  
Ответ в темуСоздание новой темы Создание опроса
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | JavaScript: для новичков | Следующая тема »


 




[ Время генерации скрипта: 0.0443 ]   [ Использовано запросов: 22 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.