jquery - 获取所有空输入并将每个输入存储在唯一变量中

Question

我有一个包含多个输入的表单，在它被发送之前我检查是否有任何输入为空：

    <input type="text" name="number" id="number" style="float:left;clear:both;"/>
    <input type="text" name="road" id="road" style="float:left;clear:both;" />
    <input type="text" name="town" id="town" style="float:left;clear:both;" />
    <input type="submit" name="submit" value="submit" id="submit" />

jQuery：

$('#submit').on('click', submitForm);
function submitForm(){
    if($('#number, #road, #town').val() ==''){
        $('#error-box').show();
        $('#error-box p').text('not all fields are complete - please complete to progress');
        return false;
    }
    else{
        alert('part 1 complete OK');
        $('#add-listing-part1').hide();
        $('#add-listing-part2').show();
        return false;
    }
} 

我想在错误框中准确显示哪些字段是空的（带有很好的用户友好消息），但我不确定如何在没有大量 if() 语句的情况下最有效地做到这一点？

逻辑如下：

1. 检查是否有任何字段为空
2. 如果“城镇”为空，则将“城镇”存储在变量中，如果“道路”为空..等
3. 将错误框中的文本更改为“并非所有字段都完整，请填写 $town 和 $road...”

Answer 1

您可以使用以下代码：

function submitForm() {
    var empty = $('form input[value=""]');
    if (empty.length > 0) {
        $('#error-box').show();
        empty.each(function (index, element) {
            $('#error-box p').text($('#error-box p').text() + $(this).attr('name') + ' ');
        });
        $('#error-box p').text($('#error-box p').text() + 'fields are not filled');
    } else {
        // complete your submit
    }
}