javascript - Javascript 検証が機能しない

Question

私は JavaScript が初めてで、単純なフォーム検証を作成しようとしています。送信ボタンを押しても何も起こりません。しばらく例を見てきましたが、どこが間違っているのかわかりません。助言がありますか：

HTML:

        <form name="myForm" class="appnitro" onsubmit="return validateForm()" action="mysql_connection.php" method="post">
            <div class="form_description">
                 <h2>Patient Record</h2>

                <p></p>
            </div>
            <ul>
                <li id="li_1">
                    <label class="description" for="element_1">&nbspName</label> 

        <span>
                <td width="68%"><input size="15" maxlength="30" class="input" type="text" name="Fname" id="Fname"></td>
                <label>First</label>
        </span>


        <span>
                <td width="68%"><input size="15" maxlength="30" class="input" type="text" name="Lname" id="Lname"></td>
                <label>Last</label>
        </span>

                    <li class="buttons">
                        <label class="description" for="element_1">&nbspGender</label> 

        <span>
                        <tr>
                    <select name="Gender"> 
                        </tr>
        </span>

                        <option value="Select">Select</option>
                        <option value="Male">Male</option>
                        <option value="Female">Female</option>
                        </select>
                        <li class="buttons">
                            <label class="description" for="element_3">&nbspAge</label> 

        <span>
                        <tr>
                    <select name="Age"> 
                        </tr>
        </span>

                            <script type="text/javascript">
                                listAge()
                            </script>
                            </select>
                            <li class="buttons">
                                <label class="description" for="element_3">&nbspPhone Number</label> 
        <span>
                 <td width="68%"><input size="25" maxlength="50" class="input" type="text" name="Phone" id="Phone"></td>
        </span>

                                <li class="buttons">
                                    <label class="description" for="element_3">&nbspEmail ID</label> 

        <span>
                <td width="68%"><input size="25" maxlength="50" class="input" type="text" name="Email" id="Email"></td>
        </span>

                                    <li class="buttons">
                                        <label class="description" for="element_3">&nbspAddress</label> 

        <span>
        <td><textarea cols="25" rows="3" class="input" name="Address" id="Address"></textarea></td>
        </span>

                                        <li class="buttons">
                                            <label class="description" for="element_3">&nbspReason For Visit</label> 

        <span>
        <td><textarea cols="25" rows="3" class="input" name="Reason" id="Reason"></textarea></td>
        </span>

                                            <li class="buttons">
                                                <label class="description" for="element_3">&nbspAttending Doctor</label> 

        <span>
        <td width="68%"><input size="25" maxlength="50" class="input" type="text" name="Doctor" id="Doctor"></td>
        </span>

                                                <li class="buttons">
                                                    <input type="submit" value="Submit" />
                                                    <input type="reset" value="Reset">
                                                </li>
            </ul>
        </form>

Javascript:

    <script>
        function validateForm() {
            var Fname = document.forms["myForm"]["Fname"].value;
            var Lname = document.forms["myForm"]["Lname"].value;
            var Phone = document.forms["myForm"]["Phone"].value;
            var Address = document.forms["myForm"]["Address"].value;
            var Reason = document.forms["myForm"]["Reason"].value;
            var Doctor = document.forms["myForm"]["Doctor"].value;

            var email = document.forms["myForm"]["email"].value;
            var atpos = email.indexOf("@");
            var dotpos = email.lastIndexOf(".");

            if (Fname == null || Fname == "") {
                alert("First name must be filled out");
                return false;
            }
            if (Lname == null || Lname == "") {
                alert("Last name must be filled out");
                return false;
            }
            if (Phone == null || Phone == "") {
                alert("Phone Number must be filled out");
                return false;
            }
            if (Address == null || Address == "") {
                alert("Address must be filled out");
                return false;
            }
            if (Reason == null || Reason == "") {
                alert("Reason for Visit must be filled out");
                return false;
            }
            if (Doctor == null || Doctor == "") {
                alert("Attending Doctor must be filled out");
                return false;
            }
            if (atpos < 1 || dotpos < atpos + 2 || dotpos + 2 >= x.length) {
                alert("Not a valid e-mail address");
                return false;
            }

        }

        function listAge() {
            var i = 1;

            for (i = 1; i <= 100; i++) {
                document.write("<option value=" + i + ">" + i + "</option>");
            }
        }
    </script>

Answer 1

あなたの HTML はひどく無効です。ブラウザーがエラー回復を実行しようとして、<form>要素をテーブルの外に移動するなどのことを行っている可能性があります (テーブルがあると仮定すると、コードには表示されませんが、テーブル データ セルが含まれています)。ボタンはもはやその中になく、フォームを送信しようとしません。(これは、フォームをテーブル行にインターリーブしようとする際の既知の問題です)。

バリデーターを使用してエラーを見つけ、修正します。

Answer 2

@Quentinは正しいです。HTMLコードとJavaScriptコードをきれいにする必要があります。

しかし、Javascript にエラーがあります。メール欄には大文字の E を書く必要があります。大文字と小文字が区別されます。

これを試してください：

var email = document.forms["myForm"]["Email"].value;