Проверка формы и оповещения сервере, если прошла


Это мой первый скрипт в объектно-ориентированном JavaScript (с jQuery 1.5.2). Его целью является, чтобы просто проверить форму (ничего сложного на данный момент просто проверяет, если значение присутствует в необходимые поля) и если проверка пройдена, он отправляет форму через AJAX и оповещения ответ сервера.

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

Вот полный рабочую страницу:

<script type="text/javascript">
var formObj = {
     validate : function(theForm, required) {
            var toValidate = required.split(',');
            for (i in toValidate) {
                 var toValidateField = $('*[name*='+$.trim(toValidate[i])+']', theForm);
                 var valueLength = toValidateField.val().length;
                 if (valueLength === 0) {
                        toValidateField.addClass('invalid');
                        formObj.inputListener(toValidateField);
                 }
            }
            if ($('.invalid').length === 0) {
                 return 'valid';
            } else {
                 return 'invalid';
            }
     },
     inputListener : function(theField) {
            theField.keyup(function() {
                 if ($(this).val().length > 0) {
                        theField.removeClass('invalid');
                 } else {
                        theField.addClass('invalid');
                 }
            });
     },
     ajaxSubmit : function(formToSubmit) {
            $.ajax({
                 url: formToSubmit.attr('action'),
                 type: formToSubmit.attr('method'),
                 data: formToSubmit.serialize(),
                 success: function(output) {
                        //return output;
                        alert(output);
                 },
                 error: function() {
                        alert('Something went wrong!');
                 }
            }); 
     }

} // end formObj

</script>

<script type="text/javascript">
     $(function() {
            $('form').submit(function(e) {
                 e.preventDefault();
                 var thisForm = $(this);

                 // validate form
                 validate = formObj.validate(thisForm, 'username, message');

                 // if valid submit via ajax
                 if (validate === 'valid') {
                        formObj.ajaxSubmit(thisForm);
                 }
            });
     });
</script>

<style type="text/css">
     .invalid { border: 2px solid red; }
</style>

<form action="script.php" method="post">
     <label>Choose Username</label><br />
     <input type="text" name="username" /><br />
     <label>Choose Password</label><br />
     <input type="text" name="password" /><br />
     <label>Message to Admin</label><br />
     <textarea name="message"></textarea><br />
     <button type="submit">Submit</button>
</form>

Содержание script.php

<?php

    while (list($key, $value) = each($_POST)) {
        echo $_POST[$key].' - ';
    }

?>


2350
3
задан 23 августа 2011 в 04:08 Источник Поделиться
Комментарии
3 ответа

Код:

http://jsfiddle.net/PZN2E/37/

HTML-код:

<form action="script.php" method="post">
<label>Choose Username</label><br />
<input type="text" name="username" id="username" /><br />
<label>Choose Password</label><br />
<input type="text" name="password" id="password" /><br />
<label>Message to Admin</label><br />
<textarea name="message" id="message"></textarea><br />
<button type="submit">Submit</button>
</form>

Я добавил "код" поля для всех входов. Это делает его легче для них, используя JavaScript

ИС

(function($) {
var inputListener = function _inputListener(field) {
if (!field[0]._bound) {
field[0]._bound = true;
field.keyup(function _listener() {
if (field.val().length > 0) {
field.removeClass('invalid');
} else {
field.addClass('invalid');
}
});
}
};

$.fn.validate = function _validate(required) {
var valid = true;
for (var i = 0, ii = required.length; i < ii; i++) {
var field = $("#" + required[i])
if (field.val().length === 0) {
field.addClass('invalid');
valid = false;
inputListener(field);
}
}
return valid;
};
})(jQuery);

jQuery(function($) {
$('form').submit(function(e) {
e.preventDefault();
var $this = $(this);

// if valid submit via ajax
if ($this.validate(['username', 'message'])) {
$.ajax({
url: $this.attr('action'),
type: $this.attr('method'),
data: $this.serialize(),
success: function(output) {
// return output;
alert(output);
},
error: function() {
alert('Something went wrong!');
}
});
}
});
});

Я отделена твой COD на два блока. Одно это закрытие, чтобы избежать утечки глобальных переменных, а другой-в готовый блок.

В inputListener не могу быть в объекте, так это просто локальная переменная, ваш Аякс функция также не должны быть в объект, если он используется только один раз.

Я ввел свой проверить функцию непосредственно в $.ФН , чтобы сделать его проще в использовании.

inputListener

Этот метод сейчас проверим, является ли функция связана с полем. Кроме того, код тот же.

проверить

Используя флаг, чтобы проверить, насколько это удалось или не удалось (действительным) является более оптимальной. Я изменил API, так что вы проходите в массив, а затем строки CSV (фу!).

Лучше использовать цикл for, то для ... в. Для ... в массив-это просто неэффективно и неправильно.

Поскольку мы добавили идентификаторы элементов, мы можем ссылаться на них по ID напрямую.

ваш готовый блок

Я переименовал формы До $этот , как его более читабельным.

1
ответ дан 23 августа 2011 в 01:08 Источник Поделиться

Его только небольшой каламбур с вашим кодом, но я нахожу имена formObj немного странным. Для меня я вижу это как FormValidator или FormExtender или что-то подобное.

Другая точка будет для(Я в ....) должно быть для(ВАР я в ...) он будет работать в любом случае и я считаю, что это просто вопрос стиля кодирования.

Также у вас есть функции, такие как:

validate: function(theForm, required({....

Я думаю, что это помогает отладки, если вы вместо этого:

validate: function FormValidate(....

Это имеет тот недостаток, что загрязняет пространство имен, но облегчает отладку как функция теперь не анонимный.

Если вы делали этого класса, чтобы инстанцировать можно написать это так:

var FormValidator = function(theForm)
{
this.formElement = theForm;
return this;
}

FormValidator.prototype = {

validate : function(theForm, required) {
//...
},
inputListener : function(theField) {
//...
},
ajaxSubmit : function(formToSubmit) {
//...
}

};

var mainForm = new FormValidator(document.forms[0]);

Если вы делаете паттерн Singleton что-то вроде:

var FormValidator = function()
{
return this;
}

function GetFormValidatorInstance()
{
return window.__formValidatorInstance || new FormValidator();
}

Эти последние два, наверное, перебор, если вы просто хотите простой компонент. Более глубокий пример выше можно найти на https://codereview.stackexchange.com/questions/1658/javascript-code-class-structure

1
ответ дан 23 августа 2011 в 05:08 Источник Поделиться

Я бы хотел дополнить ответ Джеймс кури это:


Другая точка будет для(Я в ....) должно быть для(ВАР я в ...) он будет работать в любом случае и я считаю, что это просто вопрос стиля кодирования.

В для(ВАР я в ...) должны использоваться вместо другого; в ДЛЯ(я в ....) значит, вы объявляете глобальную переменную по имени я. Всякий раз, когда вы используете переменную в JavaScript, вы еще не заявленные ранее с Вар новый будет создан, и он будет глобальным. Если вы запустите пример кода, переменной я будет создан с последнее значение было приписано после для петли.

1
ответ дан 23 августа 2011 в 03:08 Источник Поделиться