2

次のコードがあり、検証ルールが機能していません。助けてください! アクティブな x コントロールが表示されないように見えるため、Web ブラウザーは JavaScript コードを認識しません。

<HTML>
<head>
<title>Exam entry</title>

<script lanuage="javascript" type="text/javascript">

var result = true;

function validateForm() {

    var msg="";

    if (document.ExamEntry.name.value=="") {
        msg+="you must enter your name \n";
        document.ExamEntry.name.focus();
        document.getElementById('name').style.color="red";
        result = false;
    }
    if (document.ExamEntry.subject.value=="") {
        msg+("You must enter the subject \n");
        document.ExamEntry.subject.focus();
        document.getElementById('subject').style.color="red";
        result false;
    }
    if (document.ExamEntry.ExaminationNumber.value=="") {
        msg+("You must enter the Examination Number \n");
        document.ExamEntry.ExaminationNumber.focus();
        document.getElementById('ExaminationNumber').style.color="red";
        result false;
    }
    if(msg==""){
    return result;
    }

    {
    alert(msg)
    return result;
    }
}
</script>
<form>
        <input type="radio" name="qualification" value="GCSE">GCSE<br>
        <input type="radio" name="qualification" value="AS">AS<br>
        <input type="radio" name="qualification" value="A2">A2<br>
</form>
</head>

<body>
<h1>Exam Entry Form</h1>
<form name="ExamEntry" method="post" action="success.html">
<table width="50%" border="0">
    <tr>
        <td id="name">Name</td>
        <td><input type="text" name="name" /></td>
    </tr>
    <tr>
        <td id="subject">Subject</td>
        <td><input type="text" name="subject" /></td>
    </tr> 
    <tr>
        <td id="ExaminationNumber">ExaminationNumber</td>
        <td><input type="text" name="ExaminationNumber" /></td>
    </tr>
<tr>
    <td><input type="submit" name="Submit" value="Submit" onclick="return validateForm();" /></td>
    <td><input type="reset" name="Reset" value="Reset" /></td>
</tr>

</table>
</form>
</body>
</HTML>

誰か助けてください、これは私を怒らせています!

4

2 に答える 2

0

23 行目の「=」記号が欠落しており、29 行目に result false;あるはずですresult = false;

ヒント: ブラウザの開発者コンソールで js エラーを確認できます。

更新:わかりました。テストすると、次のように正常に動作します。

<html>
<head>
    <title>Exam entry</title>

    <script lanuage="javascript" type="text/javascript">

        var result = true;

        function validateForm() {

            var msg = "";

            if (document.ExamEntry.name.value == "") {
                msg += "you must enter your name \n";
                document.ExamEntry.name.focus();
                document.getElementById('name').style.color = "red";
                result = false;
            }
            if (document.ExamEntry.subject.value == "") {
                msg + ("You must enter the subject \n");
                document.ExamEntry.subject.focus();
                document.getElementById('subject').style.color = "red";
                result = false;
            }
            if (document.ExamEntry.ExaminationNumber.value == "") {
                msg + ("You must enter the Examination Number \n");
                document.ExamEntry.ExaminationNumber.focus();
                document.getElementById('ExaminationNumber').style.color = "red";
                result = false;
            }
            if (msg == "") {
                return result;
            }

            {
                alert(msg)
                return result;
            }
        }
    </script>
</head>

<body>
    <h1>Exam Entry Form</h1>
    <form name="ExamEntry" method="post" action="success.html">
        <table style="width: 50%;" border="0">
            <tr>
                <td id="name">Name</td>
                <td>
                    <input type="text" name="name" /></td>
            </tr>
            <tr>
                <td id="subject">Subject</td>
                <td>
                    <input type="text" name="subject" /></td>
            </tr>
            <tr>
                <td id="ExaminationNumber">ExaminationNumber</td>
                <td>
                    <input type="text" name="ExaminationNumber" /></td>
            </tr>
            <tr>
                <td>
                    <input type="submit" name="Submit" value="Submit" onclick="return validateForm();" /></td>
                <td>
                    <input type="reset" name="Reset" value="Reset" /></td>
            </tr>
        </table>
    </form>
</body>
</html>
于 2013-03-28T10:00:10.993 に答える
-1

質問のコード スニペットが失敗する理由はいくつかあります。いくつかの欠陥を指摘させてください：

  1. head セクションにフォームがあってはなりません
  2. document.ExamEntry無効です。正しいだろうdocument.forms['ExamEntry']
  3. みたいなdocument.ExamEntry.subjectことはありえない。子ノードの連鎖は機能しません。DOM は、提供された DOM メソッドを使用してトラバースする必要があります。http://net.tutsplus.com/tutorials/javascript-ajax/javascript-and-the-dom-series-lesson-1/などのチュートリアルを読むことをお勧めします

JavaScript を変更し、検証を機能させるためにjsFiddleを含めました。それは迅速な修正です。というヘルパー関数を追加しましたgetInputByName:

<script type="text/javascript">

function getInputByName(inputName) {
    var inputs = document.getElementsByTagName('input');

    for (var i = 0, ii = inputs.length, input; i < ii, input = inputs[i]; i++) {
        if (input.name === inputName) {
            return input
        }
    }
    return false;
}



function validateForm() {

    var result = true;

    var msg="";

    if (getInputByName('name').value=="") {
        msg+="you must enter your name \n";
        getInputByName('name').focus();
        document.getElementById('name').style.color="red";
        result = false;
    }


    if (getInputByName('subject').value=="") {
        msg+("You must enter the subject \n");
        getInputByName('subject').focus();
        document.getElementById('subject').style.color="red";
        result = false;
    }

    if (getInputByName('ExaminationNumber').value=="") {
        msg+("You must enter the Examination Number \n");
        getInputByName('ExaminationNumber').focus();
        document.getElementById('ExaminationNumber').style.color="red";
        result = false;
    }

    if (msg == ""){
        return result;
    } else {
        alert(msg)
        return result;
    }
}
</script>
于 2013-10-20T09:55:35.183 に答える