Непонятная ошибка при использовании keyup в jquery

Тема в разделе "JavaScript", создана пользователем verfaa, 14 ноя 2013.

Модераторы: ZiX
  1. verfaa

    verfaa

    Регистр.:
    29 янв 2007
    Сообщения:
    375
    Симпатии:
    41
    Итак, есть форма с полями. В этой форме 2 поля обязательны к заполнению, причем одно поле должно содержать число от 1 до 99, а второе от 400 до 15000. Если при заполнении в полях прописаны подходящие данные показываем кнопку далее:
    Код:
    <img src="continue.png" alt="next" style="display: none;" id="next_kar" />
    если что-то не так - прячем её. Вроде все просто.

    Сделав обработку 1 поля таким образом на jquery я обрадовался - все работает как надо:
    Код:
                    
    $('#karniz_asp').keyup(function(){
                        var karniz_asp_cnt = $('#karniz_asp_cnt').val();
    
                        if(karniz_asp_cnt > 0 && karniz_asp_cnt < 100) {
                            $('.karniz_asp_cnt_error').css('display','none');
                            $('#next_karniz_asp').css('display','block'); // Показываем кнопку продолжить
                        } else {
                            $('.karniz_asp_cnt_error').css('display','block');
                            $('#next_karniz_asp').css('display','none'); // Прячем кнопку продолжить
                        }
                    });
    
    и для второго поля прописал аналогично:
    Код:
                    
                    $('#karniz_asp_dlina').keyup(function(){
                        var karniz_asp_dlina_cnt = $('#karniz_asp_dlina').val();
    
                        if(karniz_asp_dlina_cnt > 399 && karniz_asp_dlina_cnt < 15001) {
                            $('.karniz_asp_error').css('display','none');
                            $('#next_karniz_asp').css('display','block'); // Показываем кнопку продолжить
                        } else {
                            $('.karniz_asp_error').css('display','block').html("Длина должна быть от 400 до 15000мм.");
                            $('#next_karniz_asp').css('display','none'); // Прячем кнопку продолжить
                        }
                    });
    
    И оказалось, что для второго поля показ/сокрытие кнопки уже почему-то не работает!
    Попробовал для первого поля убрать строки:
    Код:
    $('#next_karniz_asp').css('display','block');
    $('#next_karniz_asp').css('display','none');
    и для второго поля все чудесным образом заработало.

    Вопрос, почему возник конфликт? Как в моем случае правильно сделать?
    Почему если прописать
    Код:
    $('#next_karniz_asp').css('display','block');
    $('#next_karniz_asp').css('display','none');
    только в одном блоке $('#karniz_asp_dlina').keyup(function(){ });, все работает. А если добавить этот код во второй блок $('#karniz_asp_dlina').keyup(function(){ }); во втором блоке уже не работает?
    Прошу помощи.
     
  2. Viodele

    Viodele Механик

    Administrator
    Регистр.:
    17 дек 2011
    Сообщения:
    115
    Симпатии:
    486
    Лично я не совсем понял, как ко всему этому коду относится картинка:
    HTML:
    <img src="continue.png" alt="next" style="display: none;" id="next_kar" />
     
  3. xoxmo

    xoxmo Постоялец

    Регистр.:
    24 мар 2008
    Сообщения:
    142
    Симпатии:
    86
    тут не ошибка ли:
    Код:
                   
    $('#karniz_asp').keyup(function(){
                        var karniz_asp_cnt = $('#karniz_asp_cnt').val();
    
    при обработке #karniz_asp вы пытаетесь взять данные из поля с айди #karniz_asp_cnt, хотя надо бы с #karniz_asp

    во-вторых, при одном верном и одном неверном условиях у вас кнопка все равно будет показываться.
    может через setInterval проверять? например, так: http://jsfiddle.net/JWP9h/3/
    то есть кнопка должна показываться только если оба поля заполнены верно, если я правильно понял.
     
    verfaa нравится это.
  4. BDSG

    BDSG

    Регистр.:
    28 фев 2009
    Сообщения:
    203
    Симпатии:
    109
    как-то вот так (в верстку не заглядывал, с корректность обращения к узлам сами разберетесь, если что) :
    HTML:
    (function($){
    
        var is_karniz_asp = false,
            is_karniz_asp_dlina = false,
            karniz_asp_cnt_error = $('.karniz_asp_cnt_error'),
            karniz_asp_error = $('.karniz_asp_error');
    
        $('#karniz_asp').keyup(function(){
            var karniz_asp_cnt = $(this).val();
    
            is_karniz_asp = (karniz_asp_cnt > 0 && karniz_asp_cnt < 100);
    
            karniz_asp_cnt_error.css('display', (is_karniz_asp_dlina ? 'none' : 'block'));
    
            show_next_button();
        });
    
        $('#karniz_asp_dlina').keyup(function(){
            var karniz_asp_dlina_cnt = $(this).val();
    
            is_karniz_asp_dlina = (karniz_asp_dlina_cnt > 399 && karniz_asp_dlina_cnt < 15001);
    
            karniz_asp_error.css('display', (is_karniz_asp_dlina ? 'none' : 'block'))
                .html("Длина должна быть от 400 до 15000мм.");
    
            show_next_button();
        });
    
        function show_next_button(){
    
            if( is_karniz_asp && is_karniz_asp_dlina ){
    
                $('#next_karniz_asp').css('display','block'); // Показываем кнопку продолжить
            }
            else{
    
                $('#next_karniz_asp').css('display','none'); // Прячем кнопку продолжить
            }
        }
    
    })($);
     
  5. esche

    esche

    Регистр.:
    9 авг 2009
    Сообщения:
    359
    Симпатии:
    243
    Не.. эт нехорошо. Логично проверять при изменении (change или для "быстрого" определения key(up|down|press)) одного из полей.

    В варианте BDSG общий кусок кода вынесен, это правильно. Однако, ИМХО, "нагорожено" (хотя вроде ничего лишнего) + куча глобальных переменных..
    Для "прячем/показываем", опять же считаю, что правильнее show() / hide() использовать.
    Ну и до кучи, если появится третий, четвёртый параметр - придётся ещё "городить".

    Считаю, вполне уместно использовать решения вроде:
    http://plugins.jquery.com/validation/ (доки: http://jqueryvalidation.org/documentation )

    И да, если будет "правильный" html+css-код, можно уменьшить JS код за счёт использования классов (как-то так примерно: parent().addClass('error')) даже без дополнительных плагинов ..

    Хотя.. хороший код - который работает. :)
     
  6. BDSG

    BDSG

    Регистр.:
    28 фев 2009
    Сообщения:
    203
    Симпатии:
    109
    чего-чего?.. а ничего, что весь код в анонимном замыкании и все переменные локальны для него?.. ;)

    тогда надо будет просто другое решение реализовывать..
     
    Последнее редактирование: 14 ноя 2013
    esche нравится это.
  7. esche

    esche

    Регистр.:
    9 авг 2009
    Сообщения:
    359
    Симпатии:
    243
     
  8. BDSG

    BDSG

    Регистр.:
    28 фев 2009
    Сообщения:
    203
    Симпатии:
    109
    esche, не надо плодить сущности сверх меры.. правило третьего повторения все же помнят, да?.. ))

    не преграды долбо#бам.. ))