检查输入是否使用jQuery空

我有一种形式,我希望填写所有字段。如果单击一个字段,然后没有填写,我想显示红色背景。

我的代码:

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

如果填写的字段,则应用警告类。

What am I doing wrong?

回答 22

  1. 赞同 824

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

    And you don't necessarily need .length要看看它是否是>0使用空字符串评估为FALSE,但如果您想要进行可读性目的,则为:

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

    If you're sure it will always operate on a textfield element then you can just use this.value.

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

    你应该注意到这一点$('input:text')GRABS多个元素,指定上下文或使用thisKEYWORD如果您只想要对孤独元素的引用(在上下文的后代/儿童中提供了一个文本字段)。

    Meder Omuraliev
    $(此).val()。长度<1Tomas
    yourobjnamespace.yourjqueryInputelement.keyUp(函数(e){if($。trim($(trim).val())){//修剪值是truth} else {// trimmed值是valsey}}Frankie Loscavio
    我常常验证字段的长度,即我完全被忽视.val().length and was instead using .length() on the element itself.TASS
    对于更强大的,我还将在最后添加.trim()HQUSER
    @Niralfasi似乎多余 - 他们做同样的事情。a的朋友
  2. 赞同 161

    每一个人都有正确的想法,但我喜欢更明确和修剪价值观。

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

    如果您不使用.Length,那么“0”的条目可能会被标记为坏标记,并且5个空格的条目可能会在没有$ .trim的情况下标记为OK。好运。

    ALEX SEXTON
    Absolutelly对。剪裁是必要的,特别是在使用Finicky Wysiwyg编辑器时(例如Jwysiwyg)。Josh Smith
    离我建议将值更改为val --->如果(!$。修剪(this.val).length){// zero-length字符串修剪$(此).parents('p')。addclass ('警告'); }K 克林德德伯格
    this.val would be undefined there. It'd need to be $(this).val()但是对此没有跨浏览器的优势,所以我留出了简洁/速度。Alex Sexton
  3. 赞同 34

    在模糊上是过于有限的。它假设表单领域的焦点,所以我更愿意在提交时进行,并通过输入来映射。经过多年的幻想模糊,焦点等诀窍,保持更简单的东西会产生更多的可用性。

    $('#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..    
    });
    

    Drewdeal
  4. 赞同 24

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

    Graviton
    unctack TypeError:无法读取未定义的属性“长度”Chuck D
    @Chuckd我得到了相同的错误,我想我失踪了$if (('input:text').val().length == 0) {应该是if ($('input:text').val().length == 0) {FWD82
  5. 赞同 17

    你也可以使用..

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

    if you have doubt about spaces,then try..

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

    zigri2612
  6. 赞同 9

    没有人提到过

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

    Seems对我来说更多的jquery

    Jamie Pate
    This doesn't work in jQuery 1.9+ since they changed how the selector filter works .. jsfiddle.net/6R3RK.Wick
    I建议$(此)。没有('[value]')。addclass('警告')为1.9jsfiddle.net/znz9e.Jamie Pate
    我认为只测试字段是否以值属性启动。它不会测试您需要验证的实际表单字段值。jsfiddle.net/t89bs....没有值属性的字段与鲑鱼打开,无论您在其中键入内容。Wick
  7. 赞同 5

    The keyup event will detect if the user has cleared the box as well (i.e. backspace raises the event but backspace does not raise the keypress event in IE)

        $("#inputname").keyup(function() {
    
    if (!this.value) {
        alert('The box is empty');
    }});
    

    Ouss Ama
  8. 赞同 4

    Consider使用jQuery验证插件Instead。对于简单的必填字段,它可能会略微过度跨度,但它足以让它处理边缘案例,你甚至没有想到的边缘案例(在我们遇到他们之前也不会遇到我们任何人)。

    您可以使用一类“必需”标记所需的字段,运行$ $('表单')。validate()以$(文档).ready(),这就是它所需的一切。

    甚至在Microsoft CDN上托管,快速交付:http://www.asp.net/ajaxlibrary/cdn.ashx.

    Dave Ward
  9. 赞同 3

    :emptyPseudo-Selector用于查看元素是否包含任何子女,您应该检查值:

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

    Christian C Salvadó
  10. 赞同 3

    如果您想要考虑的另一件事,目前它只能添加警告类,如果它是空的,则在表单不再空时,如何再次删除类。

    这是:

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

    Xorinzor
  11. 赞同 3

    function checkForm() {
      return $('input[type=text]').filter(function () {
        return $(this).val().length === 0;
      }).length;
    }

    Vanilla
  12. 赞同 2

    是使用keyup用于所选输入的示例。它使用一个修剪,并确保只需触发真实的响应的序列。这是一个示例,可用于开始搜索框或与该类型的功能相关的内容。

    YourObjNameSpace.yourJqueryInputElement.keyup(function (e){
       if($.trim($(this).val())){
           // trimmed value is truthy meaning real characters are entered
        }else{
           // trimmed value is falsey meaning empty input excluding just whitespace characters
        }
    }
    

    Frankie Loscavio
  13. 赞同 2

    $(function() {
      var fields = $('#search_form').serializeArray();
      is_blank = true;
      for (var i = 0; i < fields.length; i++) {
        // excluded fields
        if ((fields[i].name != "locale") && (fields[i].name != "utf8")) {
          if (fields[i].value) {
            is_blank = false;
          }
        }
      }
      if (is_blank) {
        $('#filters-button').append(': OFF');
      }
      else {
        $('#filters-button').append(': ON');
      }
    });
    

    检查所有字段是否为空并在Filter_Button上追加或关闭

    Mauro
  14. 赞同 1

    你可以尝试这样的东西:

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

    将适用.blur()Event仅用具有空值的输入。

    Konstantine Kalbazov
    ood解决方案,但是如果在函数调用时输入不为空,则只有在函数调用中没有空,并且只有在输入的“值”属性中保存。Fabian Von Ellerts
  15. 赞同 0

    <script type="text/javascript">
    $('input:text, input:password, textarea').blur(function()
        {
              var check = $(this).val();
              if(check == '')
              {
                    $(this).parent().addClass('ym-error');
              }
              else
              {
                    $(this).parent().removeClass('ym-error');  
              }
        });
     </script>// :)
    

    MEHER
    You probably need to trim the whitespace as well.Raptor
  16. 赞同 0

    HTML 5我们可以使用新功能“必需”,只需将其添加到您想要的标记,如:

    <input type='text' required>

    Atlantiz
    And all browser don't support this... You have to add a js check AND a serverside checkReign 85
    Question标题,“检查输入是否为空使用jQuery”JoShyates1980
  17. 赞同 0

    答案的集合,想补充一下,您也可以使用此操作:placeholder-showncss选择器。使用IMO的一个更清晰的更清洁,特别是如果您已经使用了JQ并在输入上有占位符。

    if ($('input#cust-descrip').is(':placeholder-shown')) {
      console.log('Empty');
    }
    
    $('input#cust-descrip').on('blur', '', function(ev) {
      if (!$('input#cust-descrip').is(':placeholder-shown')) {
        console.log('Has Text!');
      }
      else {
        console.log('Empty!');
      }
    });
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    
    <input type="text" class="form-control" id="cust-descrip" autocomplete="off" placeholder="Description">

    You can also make use of the :valid:invalid如果您有必需的输入,选择器。如果您在输入上使用所需的属性,则可以使用这些选择器。

    Mark Carpenter Jr
  18. 赞同 0

    一个清洁的CSS-only解决方案这将是:

    input[type="radio"]:read-only {
            pointer-events: none;
    }
    

    Dion
  19. 赞同 0

    请使用此代码进行输入文本

    $('#search').on("input",function (e) {
    

    });

    KASHANI
  20. 赞同 0

    if($("#textField").val()!=null)
    

    this work for me

    Malek Tubaisaht
  21. 赞同 0

    TRY:

    function empty(){
            if ($('.text').val().length == 0)
            {
                alert("field should not be empty");
            }
        }
    

  22. 赞同 0

    在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);
      });
    

    Sonu托汉