如何检查特定div下的特定文本框是否为空

Question

I have this code:

<PlaceHolder>
<div class="greenDiv">
  <asp:TextBox ID="a"  runat="server" />
</div>
<div  class="greenDiv">
  <asp:TextBox ID="ab" runat="server" />
</div>
</PlaceHolder>

I need to let the user know if he left a Textbox empty, I tried something like this.. (not working) What have I missed?

 $('.greenDiv > input:text').blur(function () {
   if (!$(this).val()) {
     alert("fill this field");
   }
 });

Answer 1

Try using input[type=text] instead

$('.greenDiv>input[type=text]').blur(function () {
    if (!$.trim($(this).val())) {
        alert("fill this field");
    }
});

Answer 2

$('.greenDiv > input[type=text]').on('blur', function (e) {
  if (!$(e.currentTarget).val()) alert('fill this field');
});

Answer 3

Instead of input:text you should use input[type=text]

 $('.greenDiv>input[type=text]').on("blur",function () { if (!$(this).val()) { alert("fill this field"); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="greenDiv"> <input type="text"> </div> <div class="greenDiv"> <input type="text"> </div> 

Answer 4

Try this

    <PlaceHolder>
<div class="greenDiv">
  <asp:TextBox ID="a" class="x"  runat="server" />
</div>
<div  class="greenDiv">
  <asp:TextBox ID="ab" class="x" runat="server" />
</div>
</PlaceHolder>

below is Jquery

 $('.greenDiv .x').blur(function () {
                if (!$(this).val()) {
                    alert("fill this field");
                }
            });

Answer 5

Try this:

$('.greenDiv > input:text').blur(function () {
    if ($.trim($(this).val()) === '') {
        alert("fill this field");
    }
});

Your selector is fine. When you use !$(this).val() you allow inputs with spaces (or any other invisible character) to fall through. An input with a single space is technically not empty. Try $.trim(something) === '' instead.