关于模糊的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"); 
     } 
    }); 
}); 

这里是形式

<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问题的HTML。它需要检查: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输入所迷离：

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

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

PS：对于您一流的管理，不要删除的.text输入中庸之道添加和删除其他类的.text输入错误，当你有一个错误

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，而是检查它是否为空字符串。你还需要在保存文本输入的div中包装你的textarea才能正常工作。

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