0

複数の入力があるフォームがあり、送信される前に、入力のいずれかが空かどうかを確認します。

    <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 を入力してください...」
4

1 に答える 1

0

次のコードを使用できます。

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
    }
}
于 2013-02-12T20:45:39.370 に答える