JQUERY проверяет, является ли текст INPUT значением пустым и вызывает предупреждение

Как можно отображать Alert с JQUERY, если я нажму кнопку submit, значение поля imput пуст?

<input type="text" id="myMessage" name="shoutbox_msg" size="16" class="field_nosize" maxlength="150">&nbsp;
<input id="submit" type="submit" name="submit_post" class="button_nosize" value="Senden" onclick="sendMessage(); clearInput();">

Ответы

Ответ 1

$('#submit').click(function(){
   if($('#myMessage').val() == ''){
      alert('Input can not be left blank');
   }
});

Обновление

Если вы не хотите, чтобы whitespace также вы могли удалить их, используя jQuery.trim()

Описание: Удалить пробелы из начала и конца строки.

$('#submit').click(function(){
   if($.trim($('#myMessage').val()) == ''){
      alert('Input can not be left blank');
   }
});

Ответ 2

Лучше один здесь.

$('#submit').click(function()
{
    if( !$('#myMessage').val() ) {
       alert('warning');
    }
});

И вам не обязательно нужно .length или посмотреть, есть ли его > 0, поскольку пустая строка все равно равно false, но если вы хотите в целях чтения:

$('#submit').on('click',function()
{
    if( $('#myMessage').val().length === 0 ) {
        alert('warning');
    }
});

Если вы уверены, что он всегда будет работать с элементом текстового поля, вы можете просто использовать this.value.

$('#submit').click(function()
{
      if( !document.getElementById('myMessage').value ) {
          alert('warning');
      }
});

Также следует заметить, что $('input: text') захватывает несколько элементов, задает контекст или использует это ключевое слово, если вы просто хотите ссылку на одиночный элемент (при условии, что одно текстовое поле в контексте потомков/детей).

Ответ 3

Также вы можете попробовать это, если хотите сфокусироваться на том же тексте после ошибки.

Если вы хотите показать это сообщение об ошибке в абзаце, вы можете использовать его:

 $(document).ready(function () {
    $("#submit").click(function () {
        if($('#selBooks').val() === '') {
            $("#Paragraph_id").text("Please select a book and then proceed.").show();
            $('#selBooks').focus();
            return false;
        }
    });
 });