0

現在、経費フォームの作成に取り組んでおり、入力されたデータを検証する関数を作成しています。

6 つの経費額を入力し、送信ボタンのそれぞれと onClick の説明を許可します。金額フィールドをループする for ループを作成しようとしています。説明が入力されていることを確認してください。

フォームは基本的に次のようになります。

<form action="##" name="myForm" id="myForm" method="post">
    <input type="text" name="otherExpenseDesc1" id="otherExpenseDesc1">
    <input type="text" name="otherExpenseAmount1" id="otherExpenseAmount1">
    <input type="text" name="otherExpenseDesc2" id="otherExpenseDesc2">
    <input type="text" name="otherExpenseAmount2" id="otherExpenseAmount2">
    <input type="text" name="otherExpenseDesc3" id="otherExpenseDesc3">
    <input type="text" name="otherExpenseAmount3" id="otherExpenseAmount3">
    <input type="text" name="otherExpenseDesc4" id="otherExpenseDesc4">
    <input type="text" name="otherExpenseAmount4" id="otherExpenseAmount4">
    <input type="text" name="otherExpenseDesc5" id="otherExpenseDesc5">
    <input type="text" name="otherExpenseAmount5" id="otherExpenseAmount5">
    <input type="text" name="otherExpenseDesc6" id="otherExpenseDesc6">
    <input type="text" name="otherExpenseAmount6" id="otherExpenseAmount6">
    <input type="submit" name="formSubmitBtn" value="SUBMIT" onClick="checkForm();">
</form>

そして、私が現時点で持っているJavaScriptは次のとおりです。

function checkForm() {
    var errMsg = "";
    var otherExpense1 = document.getElementById('otherExpenseAmount1').value;
    var otherExpenseDesc1 = document.getElementById('otherExpenseDesc1').value;
    var otherExpense2 = document.getElementById('otherExpenseAmount2').value;
    var otherExpenseDesc2 = document.getElementById('otherExpenseDesc2').value;
    var otherExpense3 = document.getElementById('otherExpenseAmount3').value;
    var otherExpenseDesc3 = document.getElementById('otherExpenseDesc3').value;
    var otherExpense4 = document.getElementById('otherExpenseAmount4').value;
    var otherExpenseDesc4 = document.getElementById('otherExpenseDesc4').value;
    var otherExpense5 = document.getElementById('otherExpenseAmount5').value;
    var otherExpenseDesc5 = document.getElementById('otherExpenseDesc5').value;
    var otherExpense6 = document.getElementById('otherExpenseAmount6').value;
    var otherExpenseDesc6 = document.getElementById('otherExpenseDesc6').value;

    for (i=1; i<7; i++) {       
        expenseNo = 'otherExpense' + i;
        expenseDescNo = 'otherExpenseDesc' + i;
        if (expenseNo != "") {
            if (isNaN(expenseNo)) {
                alert(expenseNo + ' is not a number');
                errMsg = errMsg + 'The amount must be a number.<br />';
                document.getElementById('otherExpenseAmount' + i).style.border = '2px sold #990000';
            } else {
                alert('otherExpenseAmount' + i + ' is a number');
                document.getElementById('otherExpenseAmount' + i).style.border = '2px sold #990000';
            }
        }
    }

    if (errMsg != "") {
        showDialog('alert', 'OK', '', errMsg, '');
    }
}

いくつかのフィールドに値を指定してフォームを送信すると、数値ではありませんが、境界線のスタイルが変更されないことを示す、他の各 ExpenseAmount 項目のアラートが表示されます。

どこが間違っているのか分かりますか？

4

2 に答える 2

1

文字列で変数にアクセスしようとしています。次のように、配列を利用するようにコードを変更する必要があります。

jsフィドル

function checkForm() {
    var errMsg = "";
    var otherExpense = [];

    otherExpense.push(document.getElementById('otherExpenseAmount1').value);
    otherExpense.push(document.getElementById('otherExpenseAmount2').value);
    otherExpense.push(document.getElementById('otherExpenseAmount3').value);
    otherExpense.push(document.getElementById('otherExpenseAmount4').value);
    otherExpense.push(document.getElementById('otherExpenseAmount5').value);
    otherExpense.push(document.getElementById('otherExpenseAmount6').value);

    // 0-based index for arrays
    for (i=0; i<6; i++) { 
        if (otherExpense[i] != "") {
            if (isNaN(otherExpense[i])) {
                alert('otherExpense ' + (i + 1) + ' is not a number (=' + otherExpense[i] + ')');
                errMsg = errMsg + 'The amount must be a number.<br />';
                document.getElementById('otherExpenseAmount' + (i + 1)).style.border = '2px sold #990000';
            } else {
                alert('otherExpenseAmount' + (i + 1) + ' is a number');
                document.getElementById('otherExpenseAmount' + (i + 1)).style.border = '2px sold #990000';
            }
        }
    }

    if (errMsg != "") {
        alert(errMsg);
        //showDialog('alert', 'OK', '', errMsg, '');
    }

    return false;
}
于 2013-03-28T10:42:04.903 に答える
0

あなたの問題はこれらの行にあります。条件に関係なく、境界線を同じに設定しています（間違いやすい）。

if (isNaN(expenseNo)) {
    alert(expenseNo + ' is not a number');
    errMsg = errMsg + 'The amount must be a number.<br />';
    document.getElementById('otherExpenseAmount' + i).style.border = '2px sold #990000';
// -----------------------------------------------------------------------------^^^^^^
} else {
    alert('otherExpenseAmount' + i + ' is a number');
    document.getElementById('otherExpenseAmount' + i).style.border = '2px sold #990000';
// -----------------------------------------------------------------------------^^^^^^
}

提案

私はその男になるのが嫌いです。

jQuery の採用を検討したことはありますか? このようなタスク用に完全に設計されています。や単純なセレクターなどの方法を利用するfilterと、すべての入力が要件を満たしているかどうかを簡単に判断できます。次に例を示します。

// select all inputs with a class of "number"
// then filter those inputs, selecting only those where the value is "not a number"
// if there is a length, i.e. more than 0 were found, alert a message

if ($('input.number').filter(function() { return isNaN(this.value); }).length) {
    alert('Please ensure all numbers are valid');   
}

これには明らかに、必要な要素にクラスを追加して、HTML に小さな修正を加える必要がありますnumberが、それを行うのは小さな犠牲です。

jsFiddle デモ

于 2013-03-28T10:56:34.617 に答える