jQuery的 - 在空白表單域顯示錯誤上提交

Question

我有當用戶嘗試提交它的字段留白的是把星號在每個標籤上的HTML表單。但是，它只在第一個標籤上留下空白的星號，而不是全部。這裏是我的HTML：

<label for="name"><span class="asterisk">* </span>Name</label> 
<input type="text" id="name" name="name" class="required" /> 

<label for="email"><span class="asterisk">* </span>Email</label> 
<input type="text" id="email" name="email" class="required" /> 

<label for="company"><span class="asterisk">* </span>Company</label> 
<input type="text" id="company" name="company" class="required" /> 

<label for="address"><span class="asterisk">* </span>Address</label> 
<input type="text" id="address" name="address" class="required" /> 

<label for="favColor"><span class="asterisk">* </span>Favorite Color</label> 
<input type="text" id="favColor" name="favColor" value="N/A" /> 

而且這裏是我的jQuery：

$(function() { 
    $('.submit').click(function() { 
    if ($('#name').val().length == 0) { 
     $('label[for="name"] .asterisk').show(); 
     return false; 
     } 
    if ($('#email').val().length == 0) { 
     $('label[for="email"] .asterisk').show(); 
     return false; 
     } 
    if ($('#company').val().length == 0) { 
     $('label[for="company"] .asterisk').show(); 
      return false; 
     } 
    if ($('#address').val().length == 0) { 
     $('label[for="address"] .asterisk').show(); 
     return false; 
     } 
    if ($('#favColor').val().length == 0) { 
     $('label[for="favColor"] .asterisk').show(); 
     return false; 
     } 
    else { 
     $('.right').stop().animate({scrollTop: 0}, { duration: 1500, easing: 'easeOutQuart'}); 
     } 
    }); 
}); 

請原諒n00bish jQuery的。如果任何人都可以想出一個簡單的解決方案，讓如何讓span標籤中的星號出現在提交時留下的所有字段上，那就太棒了！

Answer 1

我會給#favColor的required類，因爲它是必需的，那麼這樣做：

$(function() { 
    $('.submit').click(function() { 
     $("label .asterisk").hide(); 
     var empty = $(".required").filter(function() { return !this.value; }) 
            .prev().find(".asterisk").show(); 
     if(empty.length) return false; //uh oh, one was empty! 
     $('.right').stop().animate({scrollTop: 0}, { duration: 1500, easing: 'easeOutQuart'}); 
    }); 
}); 

You can test it out here。

Answer 2

添加單個回報或更好，但使用validate插件

$(function() { 
    $('.submit').click(function() { 
    var ret = true; 
    if ($('#name').val().length == 0) { 
     $('label[for="name"] .asterisk').show(); 
     ret = false; 
     } 
    if ($('#email').val().length == 0) { 
     $('label[for="email"] .asterisk').show(); 
     ret = false; 
     } 
    if ($('#company').val().length == 0) { 
     $('label[for="company"] .asterisk').show(); 
     ret = false; 
     } 
    if ($('#address').val().length == 0) { 
     $('label[for="address"] .asterisk').show(); 
     ret = false; 
     } 
    if ($('#favColor').val().length == 0) { 
     $('label[for="favColor"] .asterisk').show(); 
     ret = false; 
     } 
    else { 
     $('.right').stop().animate({scrollTop: 0}, { duration: 1500, easing: 'easeOutQuart'}); 
     } 
    return ret; 
    }); 
}); 

Answer 3

你可以試試這個？

$(function() { 
$('.submit').click(function() { 
var correct = true; 
if ($('#name').val().length == 0) { 
    $('label[for="name"] .asterisk').show(); 
    correct = false; 
    } 
if ($('#email').val().length == 0) { 
    $('label[for="email"] .asterisk').show(); 
    correct = false; 
    } 
if ($('#company').val().length == 0) { 
    $('label[for="company"] .asterisk').show(); 
    correct = false; 
    } 
if ($('#address').val().length == 0) { 
    $('label[for="address"] .asterisk').show(); 
    correct = false; 
    } 
if ($('#favColor').val().length == 0) { 
    $('label[for="favColor"] .asterisk').show(); 
    correct = false; 
    } 
if(correct == true) { 
    $('.right').stop().animate({scrollTop: 0}, { duration: 1500, easing: 'easeOutQuart'}); 
    }else{ 
      return false; 
    } 
}); 
}); 

實際上是相同的代碼，但是有一個正確的變量。

Answer 4

由於每個需要輸入具有required類，只需要選擇使用，並且遍歷每一個。

試試看：http://jsfiddle.net/qeALK/

$('.submit').click(function() { 
    var ret = true; 
    $('.required').each(function() { 
     if(!this.value) { 
      $(this).prev().children('.asterisk').show(); 
      ret = false; 
     } 
    }); 
    $('.right').stop().animate({scrollTop: 0}, { duration: 1500, easing: 'easeOutQuart'}); 
    return ret; 
}); 

Answer 5

這可以更好地寫成這樣：

$(function() { 
    $('.submit').click(function() { 
     var ret = true; 
     $('input.required').each(function() { 
      if ($(this).val().length == 0) { 
       ret = false; 
       $(this).prev().find('.asterisk').show(); 
      } 
     }); 
     return ret; 
    }; 
});