Question

我正在尝试使用JavaScript验证一个简单的表单，但无法让脚本验证。按下提交按钮时，没有运行验证。如果其中一个框留空，则不会弹出错误消息以通知用户。但是我没有看到任何不合适的地方。我想知道是否提交按钮不起作用？任何人都可以伸出援手吗？

<DOCTYPE html PUBLIC "-//W3C//DTD  XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <head>
  <meta http-equiv="Content-Type"  content="text/html; charset=utf-8" />
  <title>LASTNAME: Warner Form Validation</title>
  <script type="text/javascript">
  function btnSubmit_onclick() {
     var myForm = document.formContact;
     if(myForm.txtAge.value == "" || myForm.txtName.value == "") {
        alert.("Please complete all of the fields.");
        if(myForm.txtName.vale == ""){
           myForm.txtName.focus();
        } else {
           myForm.txtAge.focus();
     } else{
        alert("Thank you for completing the form"+myForm.txtName.value);
     }
  }
  function txtAge_onblur() {
     var txtAge = document.formContact.txtAge;
     if(isNaN(txtAge.value) == true) {
        alert("Please Enter a Valid Age");
        txtAge.select();
    }
  function txtName_onchange(); {
     window.status = "Hi" + document.form1.txtName.value;
     docment.getElementById('greeting').innerHTML = "Hi" + document.frm1.txtName.value;
  }
  </script>
  </head>
  <body>
  <form action="" id="formContact" method="post" onsubmit="return validate();" name="formContact">
     <p>Name:<br />
        <input type="text" name="theName"><span class="err" id="nameErr"></span>
     </p>
     <p>Age:<br />
        <input type="text" name="theAge"><span class="err" id="ageErr"></span>
     </p>
     <p>
     <p>How may we contact you?<br>
        <input type="radio" name="contact" value="email">Email<br>
        <input type="radio" name="contact" value="no contact">No Contact<br>
     </p>
     <p><input type="button" value="Submit" name="btnSubmit" onclick="btnSubmit_onclick></p>
  </form>
  <span id="results"></span>
  </body>
</html>

Answer 1

你的代码有很多错字。这有效。

<DOCTYPE html PUBLIC "-//W3C//DTD  XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type"  content="text/html; charset=utf-8" />
<title>LASTNAME: Warner Form Validation</title>
<script type="text/javascript">
function btnSubmit_onclick() {
 var myForm = document.formContact;
 if(myForm.txtAge.value == "" || myForm.txtName.value == "") {
    alert("Please complete all of the fields.");
    if(myForm.txtName.vale == ""){
       myForm.txtName.focus();
    } else {
       myForm.txtAge.focus();
    }
 } else{
    alert("Thank you for completing the form"+myForm.txtName.value);
 }
}
function txtAge_onblur() {
 var txtAge = document.formContact.txtAge;
 if(isNaN(txtAge.value) == true) {
    alert("Please Enter a Valid Age");
    txtAge.select();
}
function txtName_onchange() {
 window.status = "Hi" + document.form1.txtName.value;
 docment.getElementById('greeting').innerHTML = "Hi" + document.frm1.txtName.value;
}
}
</script>
</head>
<body>
<form action="" id="formContact" method="post" onsubmit="return validate();" name="formContact">
 <p>Name:<br />
    <input type="text" name="txtName"><span class="err" id="nameErr"></span>
 </p>
 <p>Age:<br />
    <input type="text" name="txtAge"><span class="err" id="ageErr"></span>
 </p>
 <p>
 <p>How may we contact you?<br>
    <input type="radio" name="contact" value="email">Email<br>
    <input type="radio" name="contact" value="no contact">No Contact<br>
 </p>
 <p><input type="button" value="Submit" name="btnSubmit" onclick="btnSubmit_onclick()"></p>
</form>
<span id="results"></span>
</body>
</html>

但请注意，您没有在任何地方使用过txtAge_onBlur或txtName_onChange函数。另外，我建议在年龄段添加数字检查。

Answer 2

您已onsubmit="return validate();"但我在脚本中的任何位置都看不到validate()。

然后在您的脚本中，您有btnSubmit_onclck()，但在您的HTML中，您有onclick="btnSubmit_onclick。

所以它错过了i，而在HTML中你错过了结束"。

您还需要检查}和txtAge_onblur

上的缺失结束btnSubmit_onclick

Answer 3

onclick="btnSubmit_onclick></p>

到

onclick="btnSubmit_onclick();"></p>

和

function btnSubmit_onclck() {

到

function btnSubmit_onclick() {

表单验证有问题

3 个答案: