javascript - 模糊的 JQuery 验证

Question

我有一个要使用 JQuery 验证的表单。 当用户没有输入任何内容而离开表单字段时，该输入的类将变为红色以显示错误。

我已经创建了一个 jsfiddle 文件 http://jsfiddle.net/mTCvk/

我遇到的问题是它只适用于第一个文本输入，其他文本输入将根据第一个输入的状态进行调整。

JQuery

$(document).ready(function(){
   $('.text-input').focusout(function () {
       if ($(":text").val().length == 0) {
          $(this).removeClass("text-input").addClass("text-input-error");
       } else {
         $(this).removeClass("text-input-error").addClass("text-input");
      }
  });
});

这是表单的 HTML

<form method="post" action="">
<div class="text-input">
    <img src="images/name.png">
    <input type="text" name="name" placeholder="*Name:">
</div>
<div class="text-input">
    <img src="images/mail.png">
    <input type="text" name="email" placeholder="*Email:">
</div>
<div class="text-input">
    <img src="images/pencil.png">
    <input type="text" name="subject" placeholder="*Subject:">
</div>
<div class="text-input">
    <img src="images/phone.png">
    <input type="text" name="phone" placeholder="Phone Number:">
</div>
<textarea name="message" placeholder="*Message:"></textarea>
<input type="submit" value="Send" class="submit">

Answer 1

这是一个 DOM 问题。它需要检查该特定元素的 :text 子元素

$(document).ready(function(){
   $('.text-input').focusout(function () {
       if ($(this).find(":text").val().length == 0) {
          $(this).removeClass("text-input").addClass("text-input-error");
       } else {
         $(this).removeClass("text-input-error").addClass("text-input");
      }
  });
});

更新 fiddle http://jsfiddle.net/mTCvk/2/