關於模糊的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'); 
     } 
    });