表單驗證。單選按鈕檢查不起作用以及表單中的其他一些問題

Question

<!DOCTYPE html>
<html>
<head>
<title>SignUp</title>
<link rel="stylesheet" href="style/style.css">
<style type="text/css">
#signup{ 
    margin-left:200px;
    margin-top:90px;
}
#signup input{
    margin:2px 0px 20px 10px;
    background-color:#EAEAEA;
}

#signup button{
    font-size:16px;
margin-top:50px;
margin-left:150px;
width:100px;
height:31px;
background-color:#333333;
text-align:center;
color:#FFF;
}   
</style>
<script>
function signup()
{
var x1=document.forms["signUpForm"]["username"].value;

var x2=document.forms["signUpForm"]["email"].value;

var x3=document.forms["signUpForm"]["password1"].value;

var x4=document.forms["signUpForm"]["password2"].value; 

var x5="";                                                      /* document.forms[0].radios is an array filled with all radio buttons. Loop through all of                                                       them and see if it is checked. If one is, transfer the value of that radio button to                                                         user_input.*/
var atpos=x2.indexOf("@");
var dotpos=x2.lastIndexOf("."); 
if(document.getElementById('gender_Male').checked) {
    x5="Male";

}else if(document.getElementById('gender_Female').checked) {
  x5="Female";
}

if (x1==null || x1==""|| x2==null || x2==""||  x3==null || x3=="" || x4==null || x4=="" || x5=="")
  {
  alert("Please fill all the required fields");
  return false;
  }

else if (x3!=x4){
    alert("Psswords do not match");
  return false;
}

else if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x2.length)
  {
  alert("Not a valid e-mail address");
  return false;

  }
else{

    return document.forms[0].action = "signupdata.php";
}
}

</script>

</head>
<body>
<?php include_once("template_pageTop.php"); ?>
<div id=signup>
<h2>Sign Up Here </h2>
<form  method="post" name="signUpForm" >
<table  border="0" cellpadding="2">
  <tr>
    <td >UserName:*</td>
    <td ><input type="text" name="username" size="30"  ></td>
  </tr>
  <tr>
    <td>Email:*</td>
    <td><input type="text" name="email" size="30" ></td>
  </tr>

  <tr>
    <td>Password:*</td>
    <td><input type="password" name="password1" size="30" ></td>
  </tr>
  <tr>
    <td>Confirm Password:*</td>
    <td><input type="password" name="password2" size="30" ></td>
  </tr>

  <tr>
    <td>Gender:*</td>
    <td ><input type="radio" name="gender" value="male" id="gender_Male">Male<br/>
        <input type="radio" name="gender" value="female" id="gender_Female">Female</td>
  </tr>

  <tr>
      <td><button  onclick= "signup()" >SignUp</button> </td>

      <td><button type="reset" >Cancel</button> </td>
  </tr>

</table>

</form>
</div>
</body>
</html>

以這種形式我需要改進幾件事。

如果沒有錯誤，如何使注冊頁面可見（單擊signUp之后，我進入空白的signupdata.php頁面。如何停止此操作）
如何檢查單選按鈕（性別）是否已填寫。我的表單未進行檢查。
當字段未填充且錯誤消息彈出后，所有填充區域（包括正確填充的）都會消失，是否有辦法停止此操作並保留所有正確填充的數據。

我是網頁設計的新手。請提供任何幫助。

Answer 1

如果單選按鈕是強制性的，則默認情況下最好復選其中一個單選按鈕。

<input type="radio" name="gender" checked  value="male" >Male<br/>
        <input type="radio" name="gender" value="female">Female</td>

Answer 2

    <input type="radio" name="gender" checked  value="male" id="male" >Male<br/>
    <input type="radio" name="gender" value="female" id="female">Female</td>

  if(document.getElementById('male').checked) {
      //Male radio button is checked
  }else if(document.getElementById('female').checked) {
      //Female is checked
  }

表單驗證。單選按鈕檢查不起作用以及表單中的其他一些問題

問題描述

2 個解決方案

解決方案1
1 2013-04-18 12:17:01

解決方案2
0 2013-04-18 12:27:03

表單驗證。 單選按鈕檢查不起作用以及表單中的其他一些問題

問題描述

2 個解決方案

解決方案1 1 2013-04-18 12:17:01

解決方案2 0 2013-04-18 12:27:03

表單驗證。單選按鈕檢查不起作用以及表單中的其他一些問題

解決方案1
1 2013-04-18 12:17:01

解決方案2
0 2013-04-18 12:27:03