jquery檢查前一個元素的空字段

Question

我有5個輸入文本（答案選項），如果在非空輸入之前有空白輸入，則會給出錯誤。從A到E選項說明，用戶只填寫C和D.系統會給出錯誤，表示選擇A和B爲空（而E不報告爲錯誤）。代碼如下。問題是，有沒有更簡單的方法來做到這一點？

https://jsfiddle.net/cyw8otLo/

<div> 
    <input type="text" id="optA" value="" /><br/> 
    <input type="text" id="optB" value="" /><br/> 
    <input type="text" id="optC" value="C" /><br/> 
    <input type="text" id="optD" value="D" /><br/> 
    <input type="text" id="optE" value="" /><br/> 
    <input type="submit" id="register" value="Register" /> 
</div> 

腳本

function getInputTextOf(searchStr, str, caseSensitive) { 
    var optArr = {1: 'A', 2: 'B', 3: 'C', 4: 'D', 5: 'E'}; 

    var startIndex = 0, searchStrLen = searchStr.length; 
    var index, indices = []; 
    if (!caseSensitive) { 
     str = str.toLowerCase(); 
     searchStr = searchStr.toLowerCase(); 
    } 
    while ((index = str.indexOf(searchStr, startIndex)) > -1) { 
     indices.push(optArr[5 - index]); 
     startIndex = index + searchStrLen; 
    } 
    return indices; 
} 

var $input = $('input:text'), 
    $register = $('#register'); 

$('#register').on('click', function() { 
    var trigger = true; 
    var str = ''; 
    $($('div > input[id^="opt"]').get().reverse()).each(function (i) { 
     str = str + ($(this).val() === '' ? 0 : 1); 
    }); 

    var space = '*****'; 
    var start = str.indexOf("10"); //input start at 
    if (start > -1) { 
     var abc = space.substring(0, start+1) + str.substring(start+1, str.length); 
     var indices = getInputTextOf("0", abc, false); 
     alert('Option ' + indices.sort() + ' still empty!');  
    } 
}); 

Answer 1

你可以嘗試像

var $input = $('input:text'), 
 
    $register = $('#register'); 
 

 
$('#register').on('click', function() { 
 
    var error, filled; 
 

 
    $($input.get().reverse()).each(function() { 
 
    if (this.value != '') { 
 
     filled = true; 
 
    } else if (filled && this.value == '') { 
 
     error = true; 
 
     return false; 
 
    } 
 
    }) 
 
    if (error) { 
 
    alert('e') 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div> 
 
    <input type="text" id="optA" value="" /><br/> 
 
    <input type="text" id="optB" value="" /><br/> 
 
    <input type="text" id="optC" value="C" /><br/> 
 
    <input type="text" id="optD" value="D" /><br/> 
 
    <input type="text" id="optE" value="" /><br/> 
 
    <input type="submit" id="register" value="Register" /> 
 
</div>

Answer 2

那麼你可以嘗試設置一個標誌的東西布爾false：

var flag = false; 
 

 
$('input[type="text"]:not(:last)').each(function() { 
 
    if ($.trim(this.value) == "") { 
 
    $(this).addClass('error').focus(); 
 
    return false; 
 
    } else { 
 
    flag = true; 
 
    } 
 
    return flag; 
 
});

.error { 
 
    border: solid 1px red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <input type="text" id="optA" value="aaaa" /> 
 
    <br/> 
 
    <input type="text" id="optB" value="bbb" /> 
 
    <br/> 
 
    <input type="text" id="optC" value="C" /> 
 
    <br/> 
 
    <input type="text" id="optD" value="D" /> 
 
    <br/> 
 
    <input type="text" id="optE" value="" /> 
 
    <br/> 
 
    <input type="submit" id="register" value="Register" /> 
 
</div>