使用jQuery检查输入是否为空

Question

我有一个表格,我希望所有字段都填写.如果一个字段被点击,然后没有填写,我想显示一个红色背景.

这是我的代码:

$('#apply-form input').blur(function () {
  if ($('input:text').is(":empty")) {
    $(this).parents('p').addClass('warning');
  }
});

无论填写的字段是否填写,它都会应用警告类.

我究竟做错了什么？

Answer 1

$('#apply-form input').blur(function()
{
    if( !$(this).val() ) {
          $(this).parents('p').addClass('warning');
    }
});

并且你不一定需要.length或者看它是否>0因为空字符串的评估结果为false,但是如果你想要出于可读性的目的:

$('#apply-form input').blur(function()
{
    if( $(this).val().length === 0 ) {
        $(this).parents('p').addClass('warning');
    }
});

如果您确定它将始终在textfield元素上运行,那么您可以使用this.value.

$('#apply-form input').blur(function()
{
      if( !this.value ) {
            $(this).parents('p').addClass('warning');
      }
});

另外,您应该注意$('input:text')抓取多个元素,指定上下文或使用this关键字,如果您只想要引用单个元素(前提是在上下文的后代/子元素中有一个文本字段).

Answer 2

每个人都有正确的想法,但我喜欢更明确一些,并削减价值观.

$('#apply-form input').blur(function() {
     if(!$.trim(this.value).length) { // zero-length string AFTER a trim
            $(this).parents('p').addClass('warning');
     }
});

如果你不使用.length,那么一个'0'的条目可以被标记为坏,并且没有$ .trim就可以将一个5个空格的条目标记为ok.最好的运气.

Answer 3

在模糊上做这件事太有限了.它假设有关注表单字段,所以我更喜欢在提交时进行,并通过输入进行映射.经过多年处理花哨的模糊,专注等技巧,让事情变得更简单会产生更多的可用性.

$('#signupform').submit(function() {
    var errors = 0;
    $("#signupform :input").map(function(){
         if( !$(this).val() ) {
              $(this).parents('td').addClass('warning');
              errors++;
        } else if ($(this).val()) {
              $(this).parents('td').removeClass('warning');
        }   
    });
    if(errors > 0){
        $('#errorwarn').text("All fields are required");
        return false;
    }
    // do the ajax..    
});

Answer 4

if ($('input:text').val().length == 0) {
      $(this).parents('p').addClass('warning');
}

Answer 5

你也可以用..

$('#apply-form input').blur(function()
{
    if( $(this).val() == '' ) {
          $(this).parents('p').addClass('warning');
    }
});

如果您对空间有疑问,请尝试..

$('#apply-form input').blur(function()
{
    if( $(this).val().trim() == '' ) {
          $(this).parents('p').addClass('warning');
    }
});

Answer 6

怎么没有人提到

$(this).filter('[value=]').addClass('warning');

对我来说似乎更像jquery

Answer 7

如何在jquery中检查null未定义和空

  $(document).on('input', '#amt', function(){
    let r1;
    let r2;
    r1 = $("#remittance_amt").val();
    if(r1 === undefined || r1 === null || r1 === '')
    {
      r1 = 0.00;
    }

    console.log(r1);
  });

Answer 8

考虑改用jQuery 验证插件。对于简单的必填字段来说，它可能有点矫枉过正，但它足够成熟，可以处理你甚至还没有想到的边缘情况（我们中的任何人也不会，直到我们遇到它们）。

您可以使用“required”类标记必填字段，在 $(document).ready() 中运行 $('form').validate() 即可。

它甚至也托管在 Microsoft CDN 上，以实现快速交付：http://www.asp.net/ajaxlibrary/CDN.ashx

Answer 9

您可能还需要考虑另一件事，目前它只能在警告类为空时添加警告类，当表单不再为空时再次删除该类如何。

像这样：

$('#apply-form input').blur(function()
{
    if( !$(this).val() ) {
          $(this).parents('p').addClass('warning');
    } else if ($(this).val()) {
          $(this).parents('p').removeClass('warning');
    }
});

Answer 10

keyup事件将检测用户是否也清除了该框(即退格引发事件,但退格不会引发IE中的按键事件)

    $("#inputname").keyup(function() {

if (!this.value) {
    alert('The box is empty');
}});