Question

有人能告诉我哪里出错了吗？

我为表单元素创建并检查了四个元素，但不知何故，即使在我填充了四个元素之后，我仍然可以通过弹出窗口来完成表单

    <html>
    <head>
    <title>
    Page 3 - form validation
    </title>

    <script>
    function validateForm()
    {
    var x=document.forms["myForm"]["First Name"].value;
    if (x==null || x=="")
    {
    alert("Please fill the form");
    return false;
    }
    }
    </script>

    <script>
    function validateForm()
    {
    var x=document.forms["myForm"]["Last Name"].value;
    if (x==null || x=="")
  {
  alert("Please fill the form");
  return false;
  }
}
</script>

<script>
function validateForm()
{
var x=document.forms["myForm"]["designation"].value;
if (x==null || x=="")
  {
  alert("Please fill the form");
  return false;
  }
}    
</script>

<script>
function validateForm()
{
var x=document.forms["myForm"]["own"].value;
if (x==null || x=="")
  {
  alert("Please fill the form");
  return false;
  }
}
</script>
</head>

<body>

<h1> Please fill the form</h1>

<form name="myForm" action="helloworld.html" onsubmit="return validateForm()" method="post">
First name: <input type="text" name="First Name" /> <br>
<br>
Last name:  <input type="text" name="Last Name" />
<br>
<br>
Designation<br> <br>
<input type="radio" name="designation" value="Junior" /> Junior <br>
<input type="radio" name="designation" value="Senior" /> Senior <br>
<input type="radio" name="designation" value="Team Lead" /> Team Lead <br>
<input type="radio" name="designation" value="Manager" /> Manager <br>
<br>

What all do you own? <br>
<input type="checkbox" name="own" value="laptop" /> Laptop <br>
<input type="checkbox" name="own" value="Cell Phone" /> Cell Phone <br>
<input type="checkbox" name="own" value="Desktop" /> Desktop <br>
<input type="checkbox" name="own" value="Think Pad" /> Think Pad <br>
<input type="checkbox" name="own" value="Bike" /> Bike <br>
<input type="checkbox" name="own" value="Yamaha" /> Yamaha <br>

<br>
<br>

Select one of the following
<select>
<option value="Google"> Google </option>
<option value="Yahoo"> Yahoo </option>
<option value="Bing"> Bing </option>
<option value="Ask"> Ask </option>
</select>
<br>
<input type="submit" value="Submit" />
</form>

</body>
</html>

Answer 1

问题出在您的复选框验证中。试试这个 -

What all do you own? <br>
<input type="checkbox" name="own" id="own1" value="laptop" /> Laptop <br>
<input type="checkbox" name="own" id="own2" value="Cell Phone" /> Cell Phone <br>
<input type="checkbox" name="own" id="own3" value="Desktop" /> Desktop <br>
<input type="checkbox" name="own" id="own4" value="Think Pad" /> Think Pad <br>
<input type="checkbox" name="own" id="own5" value="Bike" /> Bike <br>
<input type="checkbox" name="own" id="own6" value="Yamaha" /> Yamaha <br>

//复选框验证的Javascript代码 -

<script>
function validateForm(){
     var flag=false;
     for (var i=1;i<7;i++){
     var el = document.getElementById('own'+i);
     if (el.checked) { 
        flag=true;
    }
  }
  if (!flag) { 
        alert("Please fill the form");
        return false;
    }
   }
 </script>

我的页面的表单验证

1 个答案: