Валидация формы
Есть задача: при сабмите формы прежде сделать валидацию ее полей, и если все в порядке - выполнить сабмит.
Для этого я вешаю обработчик на форму. Валидацию провожу с помощью AJAX-запроса к серверу. Результат проверки ловлю в колбек-функции запроса: // обработчик формы $('#my_form').submit(function () { // тут AJAX'ом проверяю поля: $.post('script.php', {f1: $('#field1').val(), f2: $('#field2').val()}, function (result) { // вот тут я вижу результат проверки }) }); Но если результат проверки отрицательный, то false должна вернуть функция-обработчик формы. Т.е. как мне из колбека ajax-вызова "выбраться" в обработчик формы? Кстати, вызов асинхронный, что усложняет дело... |
$('#my_form').submit(function () {
// тут AJAX'ом проверяю поля:
$.post('script.php', {f1: $('#field1').val(), f2: $('#field2').val()}, function (result) {
// вот тут я вижу результат проверки
if (все OK) {
// делай сабмит
$('#my_form').submit();
}
})
return false; // чтобы сабмит не происходил, т.к. тут ответа никогда не будет.
});
|
<style>
.invalidate {color:red;}
.validate {color: green;}
</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<p>Введите корректные данные</p>
<form action="#">
<input type="text" />
<input type="submit" />
</form>
<div></div>
<script>
$("form").submit(function() {
if (/\d+/.test($("input:first").val())) {
$("div").text("Правильно...").addClass('validate').show();
return true;
}
$("div").text("Неправильно!").removeClass('validate').addClass('invalidate').show().fadeOut(1000);
return false;
});
</script>
|
в моем примере еще может флажок выставлять, что форма уже проверена, чтобы бесконечно не гоняло.
|
Гран мерси! Простое и изящное решение. Наверное, я заработался, поэтому и не увидел его сам, а стал решать задачу "в лоб" :-)
|
| Часовой пояс GMT +3, время: 10:47. |