Всем привет. Недавно начал знакомиться с jQuery и для своего проекта сделал некое расширение, позволяющее все формы привязать на одну функцию, которая перед отправкой будет проверять наличие данных в контролах формы, и при правильном заполнении отправлять данные на сервер и получать ответ.
Покритикуйте пожалуйста код
<script src="jquery-1.4.4.min.js"></script>
<script>
// Критиковать начинаем отсюда
// Вспомогательная функция проверки и отправки данных формы для jQuery
(function ($)
{
// Примает два парметра: адрес назначения и ссылку на функцию возврата
$.fn.extend({postForm: function (Url, Callback)
{
// Строка формирования данных запроса
var Data = "";
// Флаг разрешающий отправку данных при верно введенных данных
var Flag = true;
// Выбор всех контролов на форме, данные которых необходимо отправлять
// Под выбор попадают input, textarea, checkbox. Отрезаются button, submit, reset
$("#"+$(this).attr("id")+" :input:not(:button, :reset)").each( function ()
{
// Дополниткльная фишка, если в свойстве контрола указано что он "нужный"
// То проверяется, ввели ли в него значение
// Данная проверка может расшириться вторым параметром на длину введенной строки
if ($(this).attr("required") && this.value == "")
{
// Если контрол "нужный" - то применим к нему эффект скрытия и показа,
// а также установим на нем фокус ввода
$(this).fadeOut(50, function () {$(this).fadeIn(300, function () {this.focus();});});
// Фалзим флаг и выходим из функции
Flag = false; return;
}
// Дополняем строку отправляемых данных парой контрол::значение
// Тут присутсвует фишка "this.checked || this.value" сделанная
// специально для IE, так как IE пофигу нажата ли галочка чекбокса,
// он все равно возвращает значение "on", и реагирует только на свойство checked =(
Data += this.id + "=" + (this.checked || this.value) + "&";
});
// Далее если все данные введены верно - отправляем запрос на указанный ресурс
// И при любом результате вызываем каллбэк функцию с текстом ответа.
// Может правильно, может нет... но фиолетово, так как делать два каллбека
// наверное бессысленно, ибо отедльную функцию обработки ошибок еще ни у кого не видел =)
if (Flag) $.ajax({
type: "post",
async: false,
url: Url,
data: Data,
success: function (XMLHttp) {if (Callback) Callback(XMLHttp); },
// тут бы по хорошему как то вернуть текст ошибки, но к примеру текст
// XMLHttpRequest cannot load file:///C:/data.html. Origin null is not allowed by Access-Control-Allow-Origin.
// мне получить не удалось =(
error: function (XMLHttp) {if (Callback) Callback("!" + XMLHttp.status); },
});
return false;
}});
})(jQuery);
// Критиковать заканчиваем здесь =)
</script>
<script>
// Тестовый каллбек, который изменит текст дива
// принятым ответом
function TestCallback(value)
{
$("#test").html(value);
}
</script>
<div id='test' style="border: 1px solid blue">anything new form</div><br><br>
<form id='mainform' onsubmit="return $(this).postForm('test.html', TestCallback)">
<input type='hidden' id='inputhidden' value='1'>
<textarea id='inputarea' required=true></textarea>
<select id="inputselect">
<option value='5'>value 5</option>
<option value='6'>value 6</option>
</select>
<input type="submit" id="inputcheck" value="Post Data">
</form>
