使用HTML和Javascript的表单

Question

我最近一直在使用HTML和JavaScript，并且尝试创建一个表单，在该表单中，我有一个外部javascript文件，该文件链接到html文件，该html文件调用一个函数来验证表单。 我的问题是，填写某些字段时，我的表单没有发出警报，或者表单提交错误。

这是我到目前为止的内容：

HTML：

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <title> Project 2 Submission Form </title>
  <meta charset="UTF-8">

  <script type="text/javascript" src="test.js" language="javascript">
  </script>

</head>

<body>

  <form id="myForm" action="">

    <table width="250" border="0" align="left">
      <tr>
        <form name="myForm" action="mailto:example@yourdomain.com" method="post" onsubmit="return Validate();">
          <td>
            <table width="100%" border="0">
              <tr>
                <td colspan="3">
                  <center><strong>Please Fill Out the Information Below</strong>
                  </center>
                </td>
              </tr>
              <tr>
                <td width="50">First Name</td>
                <td width="5">:</td>
                <td width="300">
                  <input name="firstname" type="text" id="FirstName" required>
                </td>
              </tr>
              <tr>
                <td>Last Name</td>
                <td>:</td>
                <td>
                  <input name="Last Name" type="text" id="LastName">
                </td>
              </tr>
              <tr>
                <tr>
                  <td>Middle Name (Optional)</td>
                  <td>:</td>
                  <td>
                    <input name="Middle Name" type="text" id="MiddleName">
                  </td>


                  <tr>
                    <td>Age</td>
                    <td>:</td>
                    <td>
                      <input name="Age" type="text" id="Age">
                    </td>
                  </tr>

                  <tr>
                    <td>Sex</td>
                    <td>:</td>
                    <td>
                      <input name="Sex" type="text" id="Sex">
                    </td>
                  </tr>


                  <tr>
                    <td>Birth Date</td>
                    <td>:</td>
                    <td>
                      <input name="BirthDate" type="text" id="BirthDate">
                    </td>
                  </tr>

                  <tr>
                    <td>Height</td>
                    <td>:</td>
                    <td>
                      <input name="Height" type="text" id="Height">
                    </td>
                  </tr>

                  <tr>
                    <td>Weight</td>
                    <td>:</td>
                    <td>
                      <input name="Weight" type="text" id="Weight">
                    </td>
                  </tr>

                  <tr>
                    <td>Salary</td>
                    <td>:</td>
                    <td>
                      <input name="Salary" type="text" id="Salary">
                    </td>
                  </tr>


                  <tr>
                    <td>Email</td>
                    <td>:</td>
                    <td>
                      <input name="Email" type="text" id="Email">
                    </td>
                  </tr>


                </tr>
                <tr>
                  <td>&nbsp;</td>
                  <td>&nbsp;</td>
                  <td>
                    <input type="submit" name="submit" value="Submit Form">
                  </td>



                </tr>
            </table>
          </td>
        </form>
        </tr>
    </table>
  </form>
</body>

</html>

JavaScript的：

<script>
function Validate()
{
    var fName = document.myForm.fName;
    var lName = document.myForm.lNAme;
    var mName = document.myForm.mName;
    var age = document.myForm.age;
    var sex = document.myForm.sex;
    var birth = document.myForm.birth;
    var hght = document.myForm.hght;
    var wght = document.myForm.wght;
    var sal = document.myForm.sal;
    var email = document.myForm.email;



      if (fName.value == ""){
        alert("This field cannot be left blank.");
        fName.focus();
        return false;
      }

      if (lName.value == ""){
        alert("This field cannot be left blank");
        lName.focus();
        return false;
      }


      if (age.value == ""){
        alert("This field cannot be left blank");
        age.focus();
        return false;
        else if (age.value <1 || >99({
            alert("Please re-enter your age");
            return false;
        }

      }



      if (sex.value == ""){
        alert("This field cannot be left blank");
        sex.focus();
        return false;
        else if(sex.value != "Male" || "male" || "M" || "m" || "Female" || "female" || "F" || "f"){
            alert("The sex you have entered is not entered correctly, please try again.");
            return false;
    }

     }


      if(birth.value == ""){
          alert("Date of birth cannot be left blank.");
          birth.focus();
          return false;
          else if(birthdate != "mm/dd/yyyy"){
          alert("Enter the format in mm/dd/yyyy format);
          return false;
      }

      }



       if (hght.value == ""){
          alert("This field cannot be left blank");
          hght.focus();
          return false;
        else if(hght <2 || > 7){
            alert("please enter your height in feet in inches in following format: x.y");
            return false;
    }


      }



      if (wght.value == "")
    {
        alert("This field cannot be left blank");
        wght.focus();
        return false;
        else if(weight < 0){
        alert("please enter a valid weight in pounds.");
        return false;
    }

    }



      if (sal.value == "")
    {
        alert("This field cannot be left blank.");
        sal.focus();
        return false;
        else if(sal.val.indexOf("$") != 0){
            alert("Please insert a dollar sign in the beginning of the entry");
            return false;
        }
            else if(sal.val <0 || >999999.99){
                alert("Please re-enter your salary");
                return false;
            }

    }




      if (email.value == "")
    {
        alert("Please enter your email address.");
        email.focus();
        return false;
    }
    else{
    return true;
    }
}
</script>

我已经使用chrome和IE进行了测试，但是没有运气。 谁能给我关于发生了什么问题的见解，或者我可以尝试使此表格起作用的其他做法？

Answer 1

您有两个<form>标记。 将第二个移动到第一个，然后删除现在的第一个。

...

<form name="myForm" action="mailto:example@yourdomain.com" method="post" onsubmit="return Validate();">

<table width="250" border="0" align="left" >
<tr>
<td>
<table width="100%" border="0" >
<tr>
<td colspan="3"><center><strong>Please Fill Out the Information Below</strong></center></td>
</tr>
<tr>

...

编辑添加：您还存在许多验证错误，主要是由于嵌套标签不正确造成的。 如果遇到HTML麻烦，要做的第一件事就是使用http://validator.w3.org验证HTML并修复错误。

另一个编辑：您已将var fName = document.myForm.fName;编码var fName = document.myForm.fName; 但您的HTML中没有这样的东西。 与其他变量声明类似。 查找document.getElementById()方法，并使用该方法声明变量指针。