Как предотвратить нажатие клавиши ввода, если текстовое поле пустое

0

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

<form method="post" action="http://www.mypage.com/search.aspx" id="aspnetForm">
    <input name="ctl00$centerContent$txtSearchPhysician" id="ctl00_centerContent_txtSearchPhysician" type="text" size="25" />
    <input name="ctl00$centerContent$btnPhysicianSearch" id="ctl00_centerContent_btnPhysicianSearch" type=button value="Search" />
</form>

<script>
$(document).ready(function(){
    jQuery('input[id="ctl00_centerContent_txtSearchPhysician"]').keyup(function() {
        var raw_text =  jQuery(this).val();
        var return_text = raw_text.replace(/[^a-zA-Z]/g,'');
        jQuery(this).val(return_text);
    });

    jQuery('input[id="ctl00_centerContent_txtSearchPhysician"]').keydown(function(e) {
        jQuery(this).css('background-color', '#FFFFFF');
    });

    jQuery('input[id="ctl00_centerContent_btnPhysicianSearch"]').click(function() {
        var raw_text =  jQuery('input[id="ctl00_centerContent_txtSearchPhysician"]').val();
        if (!raw_text) {
            alert ('Search Query is Blank');
            jQuery('input[id="ctl00_centerContent_txtSearchPhysician"]').css('background-color', '#FF3333');
            jQuery('input[id="ctl00_centerContent_txtSearchPhysician"]').focus();
        }
        if (raw_text) {
            //alert (raw_text); //displays the search string
            //document.location.href="http://www.google.com"; //redirects to google.com
            window.document.cookie='postbackcookie=';
            window.document.location.href="http://www.mypage.com?searchtext=" + raw_text;
        }
    });
});
</script>

Почти все работает нормально, кроме одного. Если текстовое поле имеет фокус, и я нажимаю Enter, не вводя ничего, он просто перезагружает страницу действия.

Как мне изменить код, поэтому, когда это происходит, фон текстового поля становится красным, а ввод - нулевым. Единственный раз, когда вводится текст в текстовом поле, есть ли строка?

  • 1
    Вы должны изменить селекторы jquery с jQuery ('input [id = "ctl00_centerContent_txtSearchPhysician"]') на $ ('# ctl00_centerContent_txtSearchPhysician'), нет причин указывать тип ввода, поскольку вы используете уникальные идентификаторы.
  • 0
    Вы можете использовать event.preventDefault () для события нажатия кнопки в случае, если значение текстового поля является пустой строкой.
Показать ещё 2 комментария
Теги:

2 ответа

3
Лучший ответ

Перехватите событие отправки и подтвердите форму, прежде чем разрешить отправку.

$("#aspnetForm").on("submit",function(e){
    e.preventDefault();
    if ( $("#someinput").val() != "" ) {
        this.submit(); // this doesn't trigger another submit event
    }
})

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

Поделиться
  • 0
    Это просто перезагружает страницу: /
  • 1
    это не имеет смысла. Вы изменили его так, чтобы он указывал на ваши данные правильно? мой селектор, очевидно, просто пример. Идентификатор формы также должен быть правильным.
Показать ещё 2 комментария
1

добавьте это на вход: required

<input name="ctl00$centerContent$btnPhysicianSearch" id="ctl00_centerContent_btnPhysicianSearch" type=button value="Search" required/>
Поделиться
  • 0
    К сожалению, это не работает в IE <= 8: /
  • 0
    Попробуйте использовать required = "required", это может сделать старые браузеры, как это лучше.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню