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

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Отправка данных и обработка AJAX формы (jQUERY+For 
:(
    Опции темы
nepster
Дата 11.6.2013, 01:54 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 300
Регистрация: 26.4.2009

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



Собственно представляю свою реализацию:


собственно сама форма:
Код
<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <title>HTML 5</title>

    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="js.js"></script>
    <script src="http://malsup.github.com/jquery.form.js"></script>

    <style type="text/css">
        
        input[type=text],input[type=email],input[type=password], select
        {
            width:300px;
            padding:5px;
            border: solid 1px silver;
        }
        
        
        textarea
        {
            width:400px;
            min-height:100px;
            padding:5px;
            border: solid 1px silver;
        }
        
        
        input[type=radio], input[type=checkbox]
        {
            padding:5px;
        }
        
        
        /* подсвечиваем поле с ошибкой */
        input.error-field, select.error-field, textarea.error-field 
        {
            border: solid 1px red;
        }
        
        
        /* Класс для обработки ошибок */
        .error
        {
            padding:0px;
            margin-top: 2px;
            margin-bottom: 10px;
            color:red;
        }
        
        
        /* Класс для загруки */
        .loader
        {
            display: none;
        }
    
    </style>

    
</head>
    <body>
    
    
    <div style="border: solid 2px black; width:500px; float:left;">   
        <form action="js.php" method="post" id="reg-form" name="reg-form" enctype="multipart/form-data">
        
        <input type="hidden" name="token" value="123456" />
        <input type="hidden" name="obj_id" value="123" />
        
        
        <div class="form_item">
            <input type="text" name="login" />
            <label> - Логин</label>
            <div class="error"></div>
        </div>
        
        <div class="form_item">
            <input type="password" name="password" /> 
            <label> - Пароль</label>
            <div class="error"></div>
        </div>
        
        <div class="form_item">
            <input type="email" name="email" /> 
            <label> - Почта</label>
            <div class="error"></div>
        </div>
        
        <div class="form_item">
            <input type="text" name="test" />
            <label> - Тест</label>
            <div class="error"></div>
        </div>
        
        <div class="form_item">
            <input type="file" name="img[]" />
            <input type="file" name="img[]" />
            <label> - Файл</label>
            <div class="error"></div>
        </div>
        
        <div class="form_item">
            <select name="choice">
                <option value="1">Выбор 1</option>
                <option value="2">Выбор 2</option>
                <option value="3">Выбор 3</option>
                <option value="4">Выбор 4</option>
                <option value="5">Выбор 5</option>
            </select>
            <div class="error"></div>
        </div>
        
        <div class="form_item">
            <textarea cols="20" rows="5" name="text"></textarea>
            <div class="error"></div>
        </div>
        
        <div class="form_item">
            <input type="checkbox" name="checkbox1" /> 1 и 
            <input type="checkbox" name="checkbox2" /> 2
            <div class="error"></div>
        </div>
        
        <div class="form_item">
            <input type="radio" name="radio" value="1" /> 1 и 
            <input type="radio" name="radio" value="2" /> 2
            <div class="error"></div>
        </div>
        
        
        <div class="loader">Загрузка...</div>
        <div class="error"></div>
        <div id="message"></div>
        
        <div class="form_item"><input type="submit" value="test" id="test_1" /></div>
        
        </form>
    </div>  
    
    


   <script type="text/javascript">

        $('#test_1').click(function(event)
        {
            var form_obj = '#reg-form'; // объект формы 
        
            // почистить форму от ошибок
            FormGiveItClean(form_obj, new Object());
                
            var options = 
            {
                beforeSubmit:ResponseRequest, success:ResponseSuccess, error:ResponseError, complete: ResponseComplete, 
                dataType:  'JSON', clearForm: false, resetForm: false//, timeout:   3000 
            }; 
            
            $(form_obj).ajaxForm(options); 
             
            function ResponseSuccess(response, code, xhr, $form)  
            { 
                if(parseInt(response.status) === 1)
                {
                    alert('OK');
                }
                else
                    RequestError(form_obj, new Object(), response); // обработчик ошибок полей формы
            }
        });
    
    </script>
   
   
   
    </body>
</html>






файл js.js
Код


// обработка при ошибки AJAX запроса 
function ResponseError(response, code, xhr, $form)  

    if(code == 'parsererror')
    {
        alert('Возникла ошибка, некорректный формат JSON');
    }
    else
    {
        alert('Возникла неизвестная ошибка!');
    }



// обработка при старте AJAX запроса 
function ResponseRequest(formData, jqForm, options) 

    // показать загрузку 
    $(jqForm).find('.loader').css({'display':'block'});
    
    // отключаем кнопку
    $(jqForm).find('input[type=submit]').attr('disabled','disabled');
    
    return true; 



// обработка при завершении AJAX запроса 
function ResponseComplete(response, code, jqForm)  

    // скрыть загрузку 
    $(jqForm).find('.loader').css({'display':'none'});
    
    // включаем кнопку
    $(jqForm).find('input[type=submit]').removeAttr('disabled');



         
// обработчик полей при ошибке 
function FormGiveItClean(form_obj, params_form) 
{
    var form_obj    = form_obj                || "AJAX-FROM";
    var class_fitem = params_form.class_fitem || '.form_item';
    var class_error = params_form.class_error || '.error';
    var addClassErr = params_form.addClassErr || 'error-field';
    
    $(form_obj).each(function(i, field)
    {
        // во всей форме чистим поля для ошибок
        $(this).find(class_error).html('');
        
        // во всей форме чистим поля для ошибок
        $(this).find('input').removeClass(addClassErr);
        $(this).find('textarea').removeClass(addClassErr);
    
    });

}


// обработчик полей при ошибке 
function RequestError(form_obj, params_form, msg) 
{
    var form_obj    = form_obj                || "AJAX-FROM";
    var class_fitem = params_form.class_fitem || '.form_item';
    var class_error = params_form.class_error || '.error';
    var addClassErr = params_form.addClassErr || '.error-field';
    
    // выборка поля с ошибкой 
    var form_error_field = "[name="+msg.error.field+"]";
    var num_element = 0; // номер ошибочного поля. По умолчанию 0, для полей без массива 

    // ПРОВЕРЯЕМ НАЛИЧИНЕ МАССИВА 
    var a = /\[(.*[\s\S]*?)\]/.exec(msg.error.field);

    if(a != null)
    {
        // проверяем и экранируем скобки массива 
     if(msg.error.field.indexOf(a[0]) + 1) 
        {
            msg.error.field = msg.error.field.replace(a[0], '');
            // выборка ошибочного поля 
            form_error_field = "[name="+msg.error.field+'\\[\\]'+"]";
            num_element = a[1]; // элемент массива, в котором ошика
        }
    }
    
    // обрабатываем ошики для поля 
    if($(form_obj).find(form_error_field).length)
    {
        // поднимаем скрол вверх
        var destination = $(form_obj).find(form_error_field).eq(num_element).offset().top;
        jQuery(form_obj).animate({scrollTop: destination}, 300);
        
        // устанавливаем фокус 
        $(form_obj).find(form_error_field).eq(num_element).focus();
        
        // сообщение о ошибке 
        // удаляем точку в классе
        addClassErr = addClassErr.substr(1);
        $(form_obj).find(form_error_field).eq(num_element).addClass(addClassErr);
        
        // выводим сообщение об ошибке 
        if($(form_obj).find(form_error_field).eq(num_element).parent(class_fitem).children(class_error).length)
        {   
            // сообщение о ошибке под полем 
            $(form_obj).find(form_error_field).eq(num_element).parent(class_fitem).children(class_error).html(msg.error.message);
        }
        else if($(form_obj +' > '+ class_error).length)
        {
            // сообщение о ошибке под формой  
            $(form_obj +' > '+ class_error).html(msg.error.message);
        }
        else
        {
            // удаляем точку в классе
            class_error = class_error.substr(1);
            // сообщение о ошибке под формой 
            $('<div>'+msg.error.message+'</div>').eq(num_element).addClass(class_error).appendTo(form_obj);
        }
    }
    
}




Тестовый файл PHP
Естественно проверка формы тестовая и использовать такую валидацию у себя в проекте не стоит

Код
<?php
    //header('Content-Type: application/json; charset=utf8');
    sleep(1);
    

    // Аналог json_encode
    function json_encode_utf8($arr) 
    {
        $parts = array();
        $is_list = false;
        
        if (!is_array($arr)) return;
        if (count($arr)<1) return '{}';
        
        //Find out if the given array is a numerical array
        $keys = array_keys($arr);
        $max_length = count($arr); 
                
        if(($keys[0] == 0) and ($keys[$max_length] == $max_length)) {//See if the first key is 0 and last key is length - 1
            $is_list = true;
            for($i=0; $i<count($keys); $i++) { //See if each key correspondes to its position
                if($i != $keys[$i]) { //A key fails at position check.
                    $is_list = false; //It is an associative array.
                    break;
                }
            }
        }
        foreach($arr as $key=>$value) {
            if(is_array($value)) { //Custom handling for arrays
                if($is_list) $parts[] = json_encode_utf8($value); /* :RECURSION: */
                else $parts[] = '"' . $key . '":' . json_encode_utf8($value); /* :RECURSION: */
            } else {
                $str = '';
                if(!$is_list) $str = '"' . $key . '":';
                //Custom handling for multiple data types
                if(is_numeric($value)) $str .= $value; //Numbers
                elseif($value === false) $str .= 'false'; //The booleans
                elseif($value === true) $str .= 'true';
                else $str .= '"' . addslashes($value) . '"'; //All other things
                // :TODO: Is there any more datatype we should be in the lookout for? (Object?)
                $parts[] = $str;
            }
        }
        $json = implode(',',$parts);
        if($is_list) return '[' . $json . ']';//Return numerical JSON
        return '{' . $json . '}';//Return associative JSON
    }

    
    // проверяем данные формы
    function CheckFormData()
    {
        if(!$_REQUEST['token'])
        {
            return 'ERROR_INCCORECT|TOKEN';
        }
        else if(!$_REQUEST['obj_id'])
        {
            return 'ERROR_INCCORECT|OBJ_ID';
        }
        else if(!$_REQUEST['login'])
        {
            return 'ERROR_INCCORECT|LOGIN';
        }
        else if(!$_FILES['img'])
        {
            return 'ERROR_INCCORECT|IMG[1]';
        }
        else if(!$_REQUEST['password'])
        {
            return 'ERROR_INCCORECT|PASSWORD';
        }
        else if(!$_REQUEST['email'])
        {
            return 'ERROR_INCCORECT|EMAIL';
        }
        else if(!$_REQUEST['test'])
        {
            return 'ERROR_INCCORECT|TEST';
        }
        else if(!$_REQUEST['choice'])
        {
            return 'ERROR_INCCORECT|CHOICE';
        }
        else if(!$_REQUEST['text'])
        {
            return 'ERROR_INCCORECT|TEXT';
        }
        else if(!$_REQUEST['text2'])
        {
            return 'ERROR_INCCORECT|TEXT2';
        }
        else if(!isset($_REQUEST['checkbox1']))
        {
            return 'ERROR_INCCORECT|CHECKBOX1';
        }
        else if(!isset($_REQUEST['radio']))
        {
            return 'ERROR_INCCORECT|RADIO';
        }
    }
    
    
    function Result($implementation, $data = array())
    {
        // результат
        $result = array();
        $result['status'] = 0;
        
        if($implementation === true)
        {
            $result['status'] = 1;
            if($data)
                $result['data'] = $data;
        }
        else
        {
            // языковой файл
            include 'ru.php';
            
            // КОД ОШИБКИ, ПРИМЕР: ERROR_INCCORECT|LOGIN
            // ГДЕ ПОСЛЕДНИЙ ЭЛЕМЕНТ - НАЗВАНИЕ ПОЛЯ 
            // РАЗБИВАЕМ КОД ОШИБКИ 
            $field = explode('|',$implementation);
            $field = strtolower(end($field));
            
            if (!array_key_exists($implementation, $lang)) 
            {
                $message = $lang['DEFAULT'];
            }
            else
                $message = $lang[$implementation];
            
            $result['error']  = array('code' =>$implementation, 'message'=>$message, 'field' => $field);
        }
    
        return json_encode_utf8($result);
    }
    
    /*
    print_r($_POST);
    print_r($_GET);
    print_r($_FILES);
    print_r($_REQUEST);*/
    
    
    ////////////////////////////////////////////////////////////////////////////////////////////////////
    ////////////////////////////////////////////////////////////////////////////////////////////////////
    // обрабатываем данные формы 
    $implementation = CheckFormData();
    // формируем результат 
    $result = Result($implementation);
    // ответ в формате JSON
    echo $result;





Жду ваших отзывов и комментариев. Очень буду благодарен, если укажите на ошибки или поделитесь советом и своими правками

Это сообщение отредактировал(а) nepster - 11.6.2013, 01:55
PM MAIL   Вверх
Google
  Дата 21.9.2017, 11:35 (ссылка)  





  Вверх
  
Ответ в темуСоздание новой темы Создание опроса
Здесь публикуют скрипты, которые уже проверены в обсуждениях других тем (при этом полезно поставить ссылки на все смежные обсуждения) или переносятся кем-либо из модераторов по просьбе участников, если видно, что в результате обсуждения темы был написан полезный или интересный скрипт. Третий возможный вариант - участник форума публикует скрипт, заведомо известный как полезный и эффективный, для, возможно, небольшой доработки и обсуждения.
 
1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | JavaScript: Наши скрипты | Следующая тема »


 




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


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

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