jQuery Tooltip Пользовательская реализация - PullRequest
Новая
       16

jQuery Tooltip Пользовательская реализация

0 голосов
/ 11 апреля 2011

Я работаю с приложением, которое генерирует HTML-формы и включает в себя пользовательские атрибуты, которые будут использоваться для проверки на стороне клиента.Сообщение об ошибке, которое будет использоваться для проверки, включается в атрибут error , а выражение для проверки входных данных включается в атрибут expression .

У меня есть следующий блок JavaScript, 

$(document).ready(function() {

 $("input[expression]").blur(function() {
    var inputs = $(":input[expression]");
    inputs.each(function(index){ 
       var input = inputs[index]; 
       var expression = $(this).attr('expression');
       if(!$(this).val().match(expression))
       {
        var error = $(this).attr("error");
        $(this).attr("title",error);
        $(this).tooltip({ position: "center right", opacity: 0.7});
        $(this).tooltip().show();
       }
       else
       {
       }
   });
  }); 
});

То, что я пытаюсь сделать, это настроить все поля с атрибутом expression , чтобы проверить их значение выражения против текущего значения при вводе, теряет фокус.

Сейчас это вроде работает, но не с тем поведением, которое я хотел бы иметь.

Прямо сейчас, появляется сообщение об ошибке всплывающей подсказки при нажатии наэлемент ввода.Я не хочу этого, я только хочу, чтобы он отображал сообщение об ошибке после выполнения функции обратного вызова blur().

Есть ли правильный способ сделать это?

Пример того, как будет выглядеть моя разметка, показан ниже 

<input type='text' name='firstName' expression='[a-zA-Z]' error='Please Enter First Name'/>

Ответы [ 2 ]

1 голос
/ 11 апреля 2011

Ваше событие запускается для каждого входа, когда вы размыли из любого входа.Ваше регулярное выражение также неверно. 

jQuery(document).ready(function() {

            jQuery("input[expression]").blur(function() {
                if(jQuery(this).val().search(jQuery(this).attr('expression')) == -1)
                {
                    var error = jQuery(this).attr("error");
                    jQuery(this).attr("title",error);
                    jQuery(this).tooltip({ position: "center right", opacity: 0.7});
                    jQuery(this).tooltip().show();
                }
            }); 
        });

и регулярное выражение должно быть примерно таким: ^ [a-zA-Z] * $

0 голосов
/ 11 апреля 2011

Вы можете использовать атрибуты data HTML5, чтобы данные сохранялись в вашем <input>, например: 

<input type='text' name='firstName' 
    data-expression='[a-zA-Z]' data-error='Please Enter First Name' />

. Затем вы можете использовать API-интерфейс jQuery .data ,информация, когда вам это нужно.

Хотя это и не так уж важно, этот способ не выглядит хорошим способом справиться с проверкой, поскольку этот атрибут data-expression может быть легко изменен кем-то с помощью Firebug или консоли веб-разработчика Chrome.и таким образом манипулировали, чтобы обойти вашу проверку.

...