Javascript 模糊上的JQuery验证

我想使用JQuery验证一个表单。 当用户未输入任何内容就离开表单字段时，该输入的类将更改为红色，以显示错误

我已经创建了一个JSFIDLE文件

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

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">

---

这是一个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");
      }
  });
});

---

更新的小提琴

这是一个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很简单，您已经选择了找到的第一个输入类型文本：

$（“：text”）.val（）

。。您必须在上选择输入类型。文本输入模糊：

$(":text", $(this)).val()... // First :text, on $(this) parent

---

PS：对于您的类管理，不要删除。文本输入只需添加和删除其他类。文本输入错误当您有错误时

很容易，您选择了找到的第一个输入类型text:

$（“：text”）.val（）

。。您必须在上选择输入类型。文本输入模糊：

$(":text", $(this)).val()... // First :text, on $(this) parent

PS：对于您的类管理，不要删除。文本输入只需添加和删除其他类。文本输入错误当您有错误时，您可以使用此选项：

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

您可以使用以下选项：

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

使用以下代码

$('.text-input, .text-input-error').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");
    }
});

使用以下代码

$('.text-input, .text-input-error').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");
    }
});

---

我将您的代码更改为使用.on方法，并将其设置为事件模糊。然后，我们为最近的文本输入类（即其父文本输入div）创建一个变量。我们不检查.length，而是检查它是否为空字符串。您还需要将文本区域包装在save text input div中，以使其正常工作

---

我将您的代码更改为使用.on方法，并将其设置为事件模糊。然后，我们为最近的文本输入类（即其父文本输入div）创建一个变量。我们不检查.length，而是检查它是否为空字符串。您还需要将文本区域包装在save text input div中，以使其正常工作

---

谢谢我没有时间设置文本区域谢谢我没有时间设置文本区域