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

更新了小提琴http://jsfiddle.net/mTCvk/2/

Answer 2

很简单，您已选择找到的第一个输入类型文本：$(":text").val() ..您必须在.text-input blured上选择输入类型类型：

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

http://jsfiddle.net/mTCvk/1/

PS：对于您的班级管理，请不要删除.text-input juste在您出错时添加和删除其他类.text-input-error

Answer 3

您可以使用：

$(":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");
    }
});

Answer 4

使用以下代码......

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

Answer 5

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

http://jsfiddle.net/43e2Q/

   $('input, textarea').on('blur', function () {
        var $closestParent = $(this).parent();
       if ($(this).val() == '') {
          $closestParent.removeClass("text-input").addClass("text-input-error");
           console.log('error');
       } else {
          $closestParent.removeClass("text-input-error").addClass("text-input");
           console.log('valid'); 
      }
  });

关于模糊的JQuery验证

5 个答案: