檢查輸入字段的值

Question

我有這樣的結構。 如果字段為空，請在按鈕上單擊jquery代碼，使輸入邊框變為紅色。 第一行一切正常。 在其他地方，即使我輸入有效值，按鈕單擊后行邊框也會變為紅色。

 $('.btn-submit').click(function(){ var value = $(':input').val(); if(!value.length) { $(this).parents('.row').find(':input').css('border-color','#f00'); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class='row'> <input> <button class='btn-submit'>Check</button> </div> <div class='row'> <input> <button class='btn-submit'>Check</button> </div> <div class='row'> <input> <button class='btn-submit'>Check</button> </div> 

Answer 1

更改您的JS代碼：

$('.btn-submit').click(function(){
    var value = $(this).parent().find('input').val();
    if(!value.length) {
        $(this).parents('.row').find(':input').css('border-color','#f00');
    }
});

您的問題：

您選擇所有<inputs/>而不是最接近的。

Answer 2

嘗試這個：

 $('.btn-submit').click(function(){ var value = $(this).parent().find("input").val(); if(!value.length) { $(this).parent().find(':input').css('border-color','#f00'); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class='row'> <input> <button class='btn-submit'></button> </div> <div class='row'> <input> <button class='btn-submit'></button> </div> <div class='row'> <input> <button class='btn-submit'></button> </div> 

Answer 3

單擊任何按鈕時，它正在檢查第一個 <input>的值。

更改此行：

var value = $(':input').val();

對此：

var value = $(this).prev(":input").val();

這應該在按鈕之前直接選擇<input>元素。

---

另一個提示 ：您似乎嘗試使用jQuery查找父級的子級輸入。 相反，您可以使用諸如prev()類的東西找到兄弟姐妹 （這將在您的情況下起作用）。

Answer 4

您的問題是您正在查看所有輸入，而不僅僅是按鈕的同級。 請嘗試使用以下JavaScript：

$('.btn-submit').click(function(){
    var value = $(this).parent().find('input').val();
    if(!value.length) {
        $(this).parents('.row').find(':input').css('border-color','#f00');
    }
});

這是小提琴