Отображение сообщений об ошибках / успехе в поле ввода - PullRequest
Новая
       16

Отображение сообщений об ошибках / успехе в поле ввода

1 голос
/ 28 декабря 2010

У меня есть поле ввода, которое запрашивает адрес электронной почты, за которым следует кнопка отправки.Вот код, связанный с этим:

HTML 

<div class="email">

    <form action="handler.php" method="post" id="hgb-signup">
    <input type="text" name="email" id="email" value="Enter your email address">
    <input type="submit" name="submit" id="submit" value="&raquo;" />
    </form>

</div>

JAVASCRIPT 

Event.observe(window, 'load', function() {
    jQuery('#email').focus(function() {
        jQuery(this).val('');
    });
    jQuery("#hgb-signup").submit(function(e){
        var dataString = jQuery(this).serialize();
        jQuery('#email').val('Sending... please wait...');
        jQuery.getJSON('handler.php?callback=?', {
            "sent_data": dataString }, 
            function(received_data) {
                jQuery('#email').val(received_data.message);
            }
        );
        e.preventDefault();
    });
});

Прямо сейчас, когдаНа странице загружается поле ввода #email с надписью «Введите адрес электронной почты».Когда вы нажимаете кнопку отправки, она перезаписывает значение #email на «Отправка ... пожалуйста, подождите ...», и в зависимости от того, была ли проблема или отправка прошла успешно, внутри * появится соответствующее сообщение.1015 * поле, указывающее на такое.Теперь, когда я щелкаю внутри поля ввода, текст «Введите адрес электронной почты» исчезает .val(''), а когда я щелкаю за пределами поля, это сообщение по-прежнему пропадает.Первоначально у меня был .blur(), который возвращал сообщение, что является желаемым результатом, однако, когда пользователи вводили свой адрес электронной почты и нажимали «Отправить», он отправлял «Введите свой адрес электронной почты», а не фактический адрес электронной почты, потому что когдаВы нажали кнопку отправки. .blur() был вызван.

Теперь, зная, какова цель, есть ли альтернатива .blur (), и если нет, как мне лучше всего справиться с этой ситуацией?

По сути, вот что я ищу:

В поле #email должно быть указано «Введите адрес электронной почты» в любой момент времени, когда курсор находится не внутри поля, и оно должно вернуться, когда курсор покинет поле., но я бы хотел, чтобы сообщение об ошибке / успехе оставалось там после отправки формы, если пользователь не щелкнет обратно в поле и не уйдет, а затем снова может сказать «Введите свой адрес электронной почты».

Спасибо!

1 Ответ

1 голос
/ 28 декабря 2010

Используйте .blur(), но сначала проверьте val().Замените на "Enter your email" только тогда, когда он пуст 

jQuery('#email').blur(function() {
    var $this = jQuery(this);
    if ($this.val() == '') $this.val('Enter your email');
});

Вот вам jsfiddle , вы можете проверить его.Я также добавил проверку в обработчик focus(), чтобы он не удалял содержимое при нажатии на поле ввода после ввода адреса электронной почты.

...