0

我是 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>
4

4 回答 4

3

您的 HTML 非常无效。奇怪的是浏览器正在尝试执行错误恢复并执行诸如将<form>元素移到表格之外的操作（假设有一个表格，它不会显示在您的代码中，但您的代码中有表格数据单元格）以便提交按钮不再在其中，并且不会尝试提交表单。（这是尝试交错表格行的一个已知问题）。

使用验证器查找您的错误，然后修复它们。

于 2013-11-06T15:11:44.823 回答
0

@Quentin 是对的，你需要清理你的 HTML 代码和 javascript 代码。

但是您的 Javascript 中有错误。您需要为电子邮件字段写一个大写的 E。它区分大小写。

试试这个：

var email = document.forms["myForm"]["Email"].value;
于 2013-11-06T15:15:11.343 回答
0

为什么不直接使用元素的ID属性，就好像您将ID放在任何元素中一样，始终首选保持它的唯一性。所以你可以使用document.getElementById("ID").value; 获取单个元素的值。像这样 ：

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

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

我有一个你应该尝试的演示。

演示

于 2013-11-06T15:20:52.093 回答
0

添加这个 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>");
        }
    }

我认为问题在于您尝试从至少从您提供的代码中不存在的字段中获取一些值！只需复制上面的代码，它应该可以正常工作！

于 2013-11-06T15:24:55.333 回答