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;

Answer 3

為什么不直接使用元素的ID屬性，就像將ID放在任何元素中一樣，始終首選使其唯一 。 因此，您可以使用document.getElementById（“ ID”）。value; 獲得單個元素的值。 像這樣 ：

var firstName = document.getElementById("firstNameTextBox").value;

if(firstName == ''){       
    message.innerHTML = "First Name is required";
}

我有一個演示，您應該嘗試。

演示版

Answer 4

添加此JavaScript代碼，它應該顯示

  function validateForm() { var Fname = document.forms["myForm"]["Fname"].value; var Lname = document.forms["myForm"]["Lname"].value; 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>"); } } 

我相信問題是，您嘗試從至少從您提供的代碼中不存在的字段中獲取一些值！ 只需復制上面的代碼，它肯定可以正常工作！