AjaxForm убивает <select>?

Всем доброго дня!

Понадобилось поставить в форму, которую обрабатывает FormIt через AjaxForm (в. 1.1.5), обычный select. Ну казалось бы всё просто. Всё сделал, форма уходит, данные приходят. Стал проверять форму на «дурака». Оказалось, что после второй неправильной попытки заполнения формы и при незаполненном select'е, он становится пустым. Т.е. было:

<select id="numbers" name="numbers" value="">
   <option value="">Select an option...</option>
   <option value="one">One</option>
   <option value="two">Two</option>
   <option value="three">Three</option>
</select>

После второй валидации стало:

<select id="numbers" name="numbers" value=""></select>

Не поленился, нашёл jscript для обработки формы без AjaxForm. Всё нормально — селект при любом количестве неправильных попыток не опустошается.

Вот ссылка на формы: Тест форм

Шансов конечно не много, что пользователь будет таким дЭбилом, что два раза неправильно заполнит форму и при этом забудет про селект, но надеятся на это не хочу. Куда копать, чтобы решить проблему?

Янис

17 мая 2016, 10:51

4 860

Комментарии: 17

Василий Наумкин

17 мая 2016, 13:57

У тега select нет атрибута value — www.w3schools.com/tags/tag_select.asp

Янис

17 мая 2016, 14:39

ОК, убрал, но легче не стало. Пример с оформление селекта взят отсюда: FormIt

Василий Наумкин

17 мая 2016, 14:45

Значит, ищи ошибку вот тут и исправляй.

Янис

17 мая 2016, 16:44

Скажу сразу — я в js, как свинья в апельсинах. Но вот что я нарыл:

Строка, из-за которой опустошается селект, была найдена быстро (default.js)

54. form.find('[name="' + key + '"]').addClass('error');

А вот дальше начались танцы с бубном и призывом грома — я попробовал не находить строчку, а фильтровать, пробовал искать по атрибуту «name», ничего не изменилось. А потом покурил, стукнул в бубен и спросил: «О великий селект, почему ты глючишь?» И ответил селект: «А мне имя класса не нравится!» Вот тут я выпал в осадок, но поменял строчку

54. form.find('[name="' + key + '"]').addClass('field-error');

и всё заработало. На всякий случай убрал все стили (мало ли). Те же яйца, вид сбоку.

Итого: Василий с ГитХабом у меня еще хуже, чем с js, сможешь изменить класс «error» для полей на какой нибудь другой, например на «field-error»?

Василий Наумкин

17 мая 2016, 16:58

Чтобы у всех пользователей сразу всё посыпалось? Нет, не могу.
Разбирайся, почему у тебя на сайте так происходит. Это явно локальная проблема.

Ну и эта, можно же переименовать скрипты, изменить как угодно и указать новое имя в настройках — всё будет работать и не перезапишется при обновлении.

Янис

17 мая 2016, 17:03

Нет, не локальная. Я стал править дальше, чтобы класс «field-error» очищался и нашел строку из-за которой происходит весь конфликт и обнуление селекта:

37. form.find('.error').html('');

Вот содержимое селекта с классом «error» и обнуляется.

Василий Наумкин

17 мая 2016, 17:06

А вот это уже ошибка, да. Попробуй заменить на

form.find('.error').val('');

Янис

17 мая 2016, 17:12

Стало еще хуже — обнуляются инпуты

Василий Наумкин

17 мая 2016, 17:23

Ну тогда вообще закомментируй эту строку.

Янис

17 мая 2016, 18:25

Тоже не комильфо́, сообщения с ошибками не обнуляются. Я пока все-таки поставил вариант с другим именем класса для полей. И установил AjaxForm локально, чтобы он обновления не искал.

Главное — проблема локализована. Как ее решить с наименьшими потерями для всех, вряд ли подскажу, как я уже писал — не особо я разбираюсь в js, чуть-чуть jQuery умею. Время есть, а если кто-то столкнётся с проблемой, то хоть не будет биться головой об стенку, как я вчера.

Если нужна помощь в тестировании — всегда пожалуйста.

Іван Клімчук

17 мая 2016, 18:25

Я вот так и не смог воспроизвести. Все ок работает. Проверяйте браузер и расширения/плагины в нем, может какое расширение лишние классы навешивает?
В коде тоже все верно, там ничего менять не нужно. form.find('.error').html(''); выполняется для спана с текстом ошибки, а не для самого элемента.

Янис

17 мая 2016, 18:36

> form.find('.error').html(''); выполняется для спана с текстом ошибки, а не для самого элемента.
И где вы это увидели? В строке про span нет ни слова. Обнуляются всё html содержимое елементов с классом .error. Обычные инпуты и текстареа не имеют html содержимого, поэтому их это не задевало. А вчера — сошлись звезды и понадобилась мне аджакс форма с селектом.

Глеб

30 августа 2016, 08:55

Здравствуйте Янис, у меня аналогичная проблема, Вам удалось с ней справиться?

Янис

30 августа 2016, 10:47

Как я уже писал: «Я пока все-таки поставил вариант с другим именем класса для полей. » Т.е. я дополнил default.js. Изменений не много:
После строчки

form.find('.error').removeClass('error');

Вставил

form.find('.field-error').removeClass('field-error');

Строку

form.find('[name="' + key + '"]').addClass('error');

Изменил на

form.find('[name="' + key + '"]').addClass('field-error');

После сроки

form.find('.error').removeClass('error');

Добавил

form.find('.field-error').removeClass('field-error');

И блок

$(document).on('keypress change', '.error', function () {
  var key = $(this).attr('name');
  $(this).removeClass('error');
  $('.error_' + key).html('').removeClass('error');
});

Изменил на

$(document).on('keypress change', '.error, .field-error', function () {
  var key = $(this).attr('name');
  $(this).removeClass('error field-error');
  $('.error_' + key).html('').removeClass('error');
});

Т.е. теперь инпутам, селектам и прочим полям присуждается класс .field-error, вместо .error.
Ну и css слегка подправить нужно.

Василий Столейков

30 августа 2016, 16:19

Та же проблема была и есть, пока закрыл на неё глаза…

Константин Обухов

30 ноября 2016, 15:33

решение вместо 37 строки это —

form.find('.error').each(function( index ) {
	if(!$(this).is('select')) {
        	$(this).html('');
        }
});

Василий

18 августа 2020, 14:22

Jquery отлично работает css-селекторами и решение становится простейшим:
строку

form.find('.error').html('');

заменить на

form.find('.error:not(select)').html('');

Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.

AjaxForm убивает <select>?

Комментарии: 17

Здесь упомянуты