我的页面的表单验证

form validation for my page

本文关键字：表单 验证 我的      更新时间：2023-09-26

谁能告诉我我错在哪里?

我创建了for form elements和for check for四个元素，但不知怎么的，即使我填好了四个元素，我仍然让弹出框完成表单

    <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>

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

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>
相关文章：