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>元素移到表外的事情（假设有一个表，它不会显示在您的代码中但是您的表中有表数据单元）以便提交按钮不再在其中，并且不会尝试提交表单。（这个是尝试交错形成表行的一个已知问题。）

使用a validator查找错误然后修复错误。

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";
}

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

Demo

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>");
        }
    }

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

Javascript验证不起作用

4 个答案: