Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: для новичков > Юзабильная валидация форм с полем file

Автор: KonstRuctor 16.7.2012, 11:18

Всем привет!
Продолжаю свои изыскания по построениею юзабильных форм. Сперва опишу задачу.
Есть форма, где юзеру предлагается заполнить несколько полей и прикрепить файл.
Задача: проверить введенные данные в фоновом режиме, если все ОК, отправить форму на сервер,
где уже будет аплоад и проверка файла, а также вторичная серверная проверка данных, чтобы нельзя было отправить с выключенным 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?
Спасибо!

Автор: Aliance 16.7.2012, 13:47

Как я понимаю у вас валидация на сервере написана и вы ее вызываете через ajax-запрос. Обычно же валидируют на самом js. Например http://forum.vingrad.ru/forum/topic-36336/index.html я расписывал простейшие примеры валидации форм.

Автор: KonstRuctor 16.7.2012, 16:20

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

Поэтому идея такая -- валидация всех полей на jquery, в случае успеха – поехали на сервер.
Это было бы просто шикарно, но мне никак не получается увязать эти две технологии...

Автор: Aliance 17.7.2012, 09:50

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

Автор: KonstRuctor 17.7.2012, 10:24

Спасибо!
Моя проблема – я не понимаю синтаксиса, скорее даже потенциальной возможности
при успехе success: function(msg), если этот самый msg == "OK"
передать управление форме и отправить ее на server.php со всеми данными.
Возможно ли это? Если возможно, каков синтаксис?
Огромное спасибо!

Автор: Aliance 17.7.2012, 11:20

Да не делают так, это не самый оптимальный вариант.
Лучше сделать валидацию полей по onchange, а в onsubmit например вставить проверку были ли ошибки при валидации onchange: если нет - ничего не делаем, если были - прерываем выполнение события (event.preventDefault()). Если не ответил на вопрос - опиши на псевдоязыке, что хочется.

Автор: KonstRuctor 18.7.2012, 00:10

Есть решение! Помогли на Хабре: 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, так и без него.
Для меня это просто прорыв какой-то.
Спасибо всем, кто откликнулся на призыв о помощи!