Собственно представляю свою реализацию:собственно сама форма:| Код | <!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> |
| Код |
// обработка при ошибки 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
//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
|
Отправка данных и обработка AJAX формы (jQUERY+For 
Загрузка ...
