Программист Максим Слепов

Функция, которая валидирует значение email как таковое:

function valid(validating){
    // паттерн для валидации email
    var patt = /^[.a-z0-9_-]+@[a-z0-9-]+\.[а-яА-Яa-zA-Z]{2,6}$/i;
    var patt_email = /^[.a-z0-9_-]+@[.а-яА-Яa-zA-Z]{0,50}$/i;
    $('.payment-email').find('input').on('focusin', function(){
       $(this).attr('placeholder', '');
    });
    $('.payment-email').find('input').on('focusout', function(){
       $(this).attr('placeholder', 'Email для получения билета');
    });
    $('.payment-fields>a').each(function(){
       $(this).addClass('non-active');
       $(this).attr('href', '#step2');
    });
    // всплывающая подсказка для email
    if ( validating.match(patt_email) != null) {
       hint(validating);
    }
    // валидация
    if (validating.match(patt) != null) {
       $('.payment-fields>a').each(function(){
          $(this).removeClass('non-active');
          $(this).attr('href', '#step3');
       });
       $('#email').removeClass('error');
    }
 }
 

Здесь var patt_email - паттерн для включения функции включения подсказки. Остальное, думаю, понятно.

За саму подсказку отвечает следующая функция:

function hint(validating) {
    // ключом для подсказки является первая буква после знака @
    var email_begin = validating.indexOf('@'),
    email_hint;
    // сохраняем первую часть почты для подследующей подстановки
    var email_name = validating.slice(0, email_begin);
    // смотрим первую букву после знака @, по ней будем выдавать нужную подсказку
    var email_key = validating.slice(email_begin + 1, email_begin + 2) || 0;
    if (email_key == 'a' || email_key == 'A') {
       email_hint = 'aport.ru';
       hint_show();
    } else if (email_key == 'b' || email_key == 'B') {
       email_hint = 'bk.ru';
       hint_show();
    } else if (email_key == 'e' || email_key == 'E') {
       email_hint = 'e1.ru';
       hint_show();
    } else if (email_key == 'i' || email_key == 'I') {
       email_hint = 'inbox.ru';
       hint_show();
    } else if (email_key == 'g' || email_key == 'G') {
       email_hint = 'gmail.com';
       hint_show();
    } else if (email_key == 'l' || email_key == 'L') {
       email_hint = 'listbox.ru';
       hint_show();
    } else if (email_key == 'm' || email_key == 'M') {
       email_hint = 'mail.ru';
       hint_show();
    } else if (email_key == 'r' || email_key == 'R') {
       email_hint = 'rambler.ru';
       hint_show();
    } else if (email_key == 'y' || email_key == 'Y') {
       email_hint = 'yandex.ru';
       hint_show();
    } else {
       $('.email-hint').hide();
    }
    function hint_show() {
       // вводимое значение email после знака @
       var email_input = validating.slice(email_begin + 1);
       if (email_hint.match(email_input) != null) {
          $('.email-hint').show();
          var x = $('.email-hint').width();
          $('.email-hint').css('margin-left', -x/2 + 'px');
          $('.email-hint-text').text(email_hint);
          // нажимаем на текст подсказки
          $('.email-hint-text').click(function(){
             $('#email').val(email_name + '@' + email_hint);
             $('.email-hint').hide();
             validating = $('#email').val();
             valid(validating);
          });
          // или нажимаем пробел
          $('#email').keypress(function(event){
             if (event.charpre == 32) {
                $('#email').val(email_name + '@' + email_hint);
                $('.email-hint').hide();
                validating = $('#email').val();
                valid(validating);
                // чтобы сам пробел не передавался в инпут
                return false;
             }
          })
          // прячем подсказку, если в дальнейших символах не совпадает
       } else {
          $('.email-hint').hide();
       }
    }
    // убираем подсказку, если убрали фокус с инпута
    $('.step2').click(function(element) {
       var x = element.pageX,
           y = element.pageY,
           hint_x = $('.email-hint').offset().left,
           hint_y = $('.email-hint').offset().top,
           hint_width = $('.email-hint').width(),
           hint_height = $('.email-hint').height();
       if ( (x < (hint_x - 5) || x > (hint_x + hint_width + 5)) && (y < (hint_y - 5) || y > (hint_y + hint_height + 5)) ) {
          $('.email-hint').hide();
       }
    });
    // убираем подсказку, если в текст появилась точка
    if (validating.match(/\./) != null) {
       $('.email-hint').hide();
    }
    // убираем подсказку, если нажали крестик
    $('.email-hint-close').click(function(){
       $('.email-hint').hide();
    });
 }

Разберём подробнее.

1) Переменная validating - само вводимое в input значение
2) В зависимости от первой буквы после знака @ показываем ту или иную подсказку (список определён заказчиком задачи)
3) После определения текста подсказки показываем слой с ней, либо прячем его
4) Функция hint_show() смотрит, что происходит после появления слоя с подсказкой. Переменная email_input - то, что введено в input после знака @. Пока оно совпадает с текстом подсказки, показываем. Как только расхождение в одном знаке, скрываем подсказку
5) По нажатию на крестик, при вводе знака "." в input либо по нажатию на любую другую область экрана, кроме блока с подсказкой (+5 пикселей по сторонам) прячем подсказку.

Ну и как это выглядит на практике.

1) Начинаем вводить значение email:

2) После совпадения по ключевой букве появляется подсказка yandex.ru, которая не исчезает, пока буквы совпадают:

Сама валидация инициализируется следующим образом:

var validating='';
 valid(validating);
 $('#email').on('input propertychange', function(){
    validating = $(this).val();
    $(this).addClass('error');
    valid(validating);
 });