Javascript 单选按钮验证错误

对于下面验证功能中的性别单选按钮验证，只要未选择任何一个性别单选按钮，就会发出警报。但是，无论何时在浏览器中选择“确定”，都会提交表单。是什么导致了这个问题？如果可能的话，当返回false时，我也希望它能像其他的一样被聚焦

JavaScript

 function validate()
{
var gender = document.getElementsByName("gender");
   if( document.myForm.firstname.value == "" )
   {
     alert( "Please provide your first name!" );
     document.myForm.firstname.focus() ;
     return false;
   }
     if( document.myForm.lastname.value == "" )
   {
     alert( "Please provide your last name!" );
     document.myForm.lastname.focus() ;
     return false;
   }
     if( document.myForm.email.value == "" )
   {
     alert( "Please provide your email!" );
     document.myForm.email.focus() ;
     return false;
   }
     if( (gender[0].checked == false) && (gender[1].checked == false))
   {
     alert( "Please provide your gender!" );
     document.myForm.male.focus() ;
     return false;
   }
     if( document.myForm.date.value == "" )
   {
     alert( "Please provide a date to be performed!" );
     document.myForm.date.focus() ;
     return false;
   }
     if( document.myForm.vname.value == "" )
   {
     alert( "Please provide a victim's name!" );
     document.myForm.vname.focus() ;
     return false;
   }
     if( document.myForm.vemail.value == "" )
   {
     alert( "Please provide the victim's email!" );
     document.myForm.vemail.focus() ;
     return false;
   }
   return( true );
}

HTML:

真理
名字：


姓氏：


电子邮件：


男性
女性


执行日期：


受害者
名称：


电子邮件：


请在下面选择一个真理问题

你有没有摔倒并头着地过

你有没有归还过太多的零钱

你曾经住进过医院吗

你烤过蛋糕吗

你考试作弊过吗

你有没有想过你从未出生过

你曾经躲过主日学校吗

只需为性别提供默认值

---

这将避免任何可能的混淆，并且总体上需要更少的验证。

您正在定义validate（）函数，但我没有看到您在提交文档时实际调用它。提交输入本身不知道您的验证

可能会改变：

<input type="submit" value="Submit"/>

到

我会根据不同的ID进行选择，将它们命名为男性和女性，并按照ElPedro的建议调用验证函数。

我已经找到了解决方案。而不是：

if( (gender[0].checked == false) && (gender[1].checked == false))
 {
  alert( "Please provide your gender!" );
     document.myForm.male.focus() ;
     return false;
   }

应该是：

  if( (gender[0].checked == false) && (gender[1].checked == false))
   {
     alert( "Please provide your gender!" );
     document.myForm.male.focus() ;
     return true;
   }

---

我这样做了&验证工作非常完美。

我认为这是焦点功能的问题。 我几乎没做什么改变，结果成功了

<div id="box">
        <form action="/cgi-bin/test.cgi" name="myForm"  onsubmit="return validate();">
            <h1> Truth </h1>
            <label> First Name: </label> <input type="text" name="firstname" id="firstname" maxlength="30" placeholder="John" /> <br><br>
            <label> Last Name: </label> <input type="text" name="lastname" id="lastname" maxlength="30" placeholder="Doe" /> <br><br>
            <label> Email:</label> <input type="text" name="email" id="email" placeholder="user@mydomain.com" /> <br><br>
            <label> Male </label><input type="radio" name="gender" id="gender" value="male"/>
            <label> Female </label><input type="radio" name="gender" id="gender" value="female"/> <br><br>
            <label> Date to be performed: </label><input type="date" name="date" id="date" /><br><br>
            <h2> Victim </h2>
            <label> Name: </label>  <input type="text" name="vname" id="vname" maxlength="30" placeholder="Mary Jane" /><br><br>
            <label> Email:</label> <input type="text" name="vemail" id="vemail" placeholder="user@mydomain.com" /> <br><br>


            <h2> Please select a truth questions below </h2> <br>
            <input type="radio" name="truth" value="q1"> Have you ever fallen and landed on your head? <br>

            <input type="radio"  name="truth" value="q2"> Have you ever return too much change? <br>

            <input type="radio" name="truth" value="q3"> Have you ever been admitted into the hospital? <br>

            <input type="radio" name="truth" value="q4"> Have you ever baked a cake? <br>

            <input type="radio" name="truth" value="q5"> Have you ever cheated on test? <br>

            <input type="radio" name="truth" value="q6"> Did you ever wish you were never born? <br>

            <input type="radio" name="truth" value="q7"> Did you ever hide from Sunday School? <br><br>
            <input type="submit" value="Submit"/> <br>
        </form> 
    </div>
    <script>
        function validate(e)
        {
            var gender = document.getElementsByName("gender");
            if( document.myForm.firstname.value == "" )
            {
                alert( "Please provide your first name!" );
                return false;
            }
            if( document.myForm.lastname.value == "" )
            {
                alert( "Please provide your last name!" );
                 return false;
            }
            if( document.myForm.email.value == "" )
            {
                alert( "Please provide your email!" );
                 return false;
            }
            if( (gender[0].checked == false) && (gender[1].checked == false))
            {
                alert( "Please provide your gender!" );
                return false;
            }
            if( document.myForm.date.value == "" )
            {
                alert( "Please provide a date to be performed!" );
                 return false;
            }
            if( document.myForm.vname.value == "" )
            {
                alert( "Please provide a victim's name!" );
                 return false;
            }
            if( document.myForm.vemail.value == "" )
            {
                alert( "Please provide the victim's email!" );
                 return false;
            }

            return true;
        }
    </script>

真理
名字：


姓氏：


电子邮件：


男性
女性


执行日期：


受害者
名称：


电子邮件：


请在下面选择一个真理问题

你有没有摔倒并头着地过

你有没有归还过太多的零钱

你曾经住进过医院吗

你烤过蛋糕吗

你考试作弊过吗

你有没有想过你从未出生过

你曾经躲过主日学校吗




功能验证（e）
{
var-gender=document.getElementsByName（“性别”）；
如果（document.myForm.firstname.value==“”）
{
提醒（“请提供您的名字！”）；
返回false；
}
如果（document.myForm.lastname.value==“”）
{
提醒（“请提供您的姓氏！”）；
返回false；
}
如果（document.myForm.email.value==“”）
{
提醒（“请提供您的电子邮件！”）；
返回false；
}
if（（性别[0]。选中==false）和&（性别[1]。选中==false））
{
提醒（“请提供您的性别！”）；
返回false；
}
如果（document.myForm.date.value==“”）
{
警告（“请提供要执行的日期！”）；
返回false；
}
如果（document.myForm.vname.value==“”）
{
警告（“请提供受害者的姓名！”）；
返回false；
}
如果（document.myForm.vemail.value==“”）
{
提醒（“请提供受害者的电子邮件！”）；
返回false；
}
返回true；
}

不知道答案是否正确，但我使用了这种方法，每次之后，我都按照自己的意愿传递变量值，并传递到表单：）

var-swticher=document.getElementById（'swticher-on'）；
var swticher_off=document.getElementById（'swticher-off'）；
功能检查（e）{
如果（e.checked==swticher.checked）
{
//通过在其中设置valirable，可以将on的值设置为默认值
var val=swticher.value=“1”；
警报（'on->'+val）；
}
else if（e.checked==swticher\u off.checked）
{ 
//通过在其中设置valirable，可以将off的值设置为默认值
var val=swticher.value=“0”；
警报（“关闭->”+val）；
}  
}

在…上
关

你能用这个问题创建一个JSFIDLE吗？@Stefan提交对JSFIDLE不起作用。当你尝试提交时会出现什么错误？@misterManSam验证成功后，浏览器中的警报窗口会弹出并显示“请提供你的性别！”但之后，提交会通过并忽略其余的验证（即日期、受害者姓名等）@Stefan请参见上文^我被要求对所有字段进行验证。@DanielleStewart那么你不想信任javascript。这是应该在服务器端完成的事情。客户端javascript可以在浏览器中轻松修改。哦，不，这个任务是测试客户端验证。哦……这是家庭作业。在任何形式的pr中生产环境您永远不希望依赖客户端代码进行验证，因此，希望在客户端验证所有内容是一个简单的要求。如果您这样做，那么它们将被视为两组单选按钮。单选按钮选择的全部要点是，您可以在它们之间切换，并且为此它们必须具有名称相同。另外，您的焦点问题是因为您试图将焦点放在一个名为“mail”的控件上，该控件不存在。请将其更改为“焦点放在document.myForm.gender[0]上”

  if( (gender[0].checked == false) && (gender[1].checked == false))
   {
     alert( "Please provide your gender!" );
     document.myForm.male.focus() ;
     return true;
   }

<div id="box">
        <form action="/cgi-bin/test.cgi" name="myForm"  onsubmit="return validate();">
            <h1> Truth </h1>
            <label> First Name: </label> <input type="text" name="firstname" id="firstname" maxlength="30" placeholder="John" /> <br><br>
            <label> Last Name: </label> <input type="text" name="lastname" id="lastname" maxlength="30" placeholder="Doe" /> <br><br>
            <label> Email:</label> <input type="text" name="email" id="email" placeholder="user@mydomain.com" /> <br><br>
            <label> Male </label><input type="radio" name="gender" id="gender" value="male"/>
            <label> Female </label><input type="radio" name="gender" id="gender" value="female"/> <br><br>
            <label> Date to be performed: </label><input type="date" name="date" id="date" /><br><br>
            <h2> Victim </h2>
            <label> Name: </label>  <input type="text" name="vname" id="vname" maxlength="30" placeholder="Mary Jane" /><br><br>
            <label> Email:</label> <input type="text" name="vemail" id="vemail" placeholder="user@mydomain.com" /> <br><br>


            <h2> Please select a truth questions below </h2> <br>
            <input type="radio" name="truth" value="q1"> Have you ever fallen and landed on your head? <br>

            <input type="radio"  name="truth" value="q2"> Have you ever return too much change? <br>

            <input type="radio" name="truth" value="q3"> Have you ever been admitted into the hospital? <br>

            <input type="radio" name="truth" value="q4"> Have you ever baked a cake? <br>

            <input type="radio" name="truth" value="q5"> Have you ever cheated on test? <br>

            <input type="radio" name="truth" value="q6"> Did you ever wish you were never born? <br>

            <input type="radio" name="truth" value="q7"> Did you ever hide from Sunday School? <br><br>
            <input type="submit" value="Submit"/> <br>
        </form> 
    </div>
    <script>
        function validate(e)
        {
            var gender = document.getElementsByName("gender");
            if( document.myForm.firstname.value == "" )
            {
                alert( "Please provide your first name!" );
                return false;
            }
            if( document.myForm.lastname.value == "" )
            {
                alert( "Please provide your last name!" );
                 return false;
            }
            if( document.myForm.email.value == "" )
            {
                alert( "Please provide your email!" );
                 return false;
            }
            if( (gender[0].checked == false) && (gender[1].checked == false))
            {
                alert( "Please provide your gender!" );
                return false;
            }
            if( document.myForm.date.value == "" )
            {
                alert( "Please provide a date to be performed!" );
                 return false;
            }
            if( document.myForm.vname.value == "" )
            {
                alert( "Please provide a victim's name!" );
                 return false;
            }
            if( document.myForm.vemail.value == "" )
            {
                alert( "Please provide the victim's email!" );
                 return false;
            }

            return true;
        }
    </script>