单选按钮验证错误答案

【问题标题】：Radio Button Validation Error单选按钮验证错误
【发布时间】：2015-01-04 06:26:42
【问题描述】：

对于下面验证函数中的性别单选按钮验证，只要没有选择任何性别单选按钮，就会出现警报。但是，只要在浏览器中选择“ok”，就会提交表单。似乎是什么导致了这个问题？如果可能的话，我还希望它在返回 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：

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

【问题讨论】：

你能创建一个解决这个问题的 jsfiddle 吗？
@Stefan 提交不适用于 jsfiddle。
您尝试提交时遇到什么错误？
@misterManSam 验证成功，浏览器中的警报窗口弹出并说“请提供您的性别！”但在那之后，提交会通过并忽略剩余的验证（即日期、受害者姓名等）
@Stefan 请见上文^

标签： javascript html validation

【解决方案1】：

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

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

我这样做了，验证工作正常。

【讨论】：

我需要两天时间才能做到这一点。

【解决方案2】：

只需提供性别的默认值。

<input type="radio" name="gender" id="gender" value="male" checked/>

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

【讨论】：

我需要对所有字段进行验证。
@DanielleStewart 那么您不想为此信任javascript。这是应该在服务器端完成的事情。客户端javascript可以在浏览器中轻松修改。
哦不，这个任务是为了测试客户端验证。
哦...它的功课。在任何类型的生产环境中，您都不想依赖客户端代码进行验证，因此验证客户端的所有内容是一项微不足道的要求。

【解决方案3】：

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

也许会改变：

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

到

<input type="button" value="Submit" onClick="if(validate==true) {document.forms[0].submit()}" />

【讨论】：

另外，您的焦点问题是因为您试图将注意力集中在一个名为“mail”的控件上，该控件不存在。将其更改为专注于 document.myForm.gender[0]，它应该可以工作。
我已经找出问题所在。请看下面我的回答。

【解决方案4】：

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

【讨论】：

如果您这样做，那么它们将被视为两组单选按钮。关于单选按钮选择的全部意义在于您可以在它们之间切换，为此它们必须具有相同的名称。

【解决方案5】：

我认为这是焦点功能的问题。我做了一些改动，效果很好。

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

【讨论】：

【解决方案6】：

不知道是否是正确的答案，但我使用这种方式，并且在 evething 之后，我将变量值作为我定义的愿望传递并传递给表单:)

var swticher = document.getElementById('swticher-on');
var swticher_off = document.getElementById('swticher-off');
function check(e){
    if(e.checked == swticher.checked)
    {
          // you can set the value for on as default by set valirable in it
          var val = swticher.value = "1";
          alert('on -> '+val);
       
     }
        else  if(e.checked == swticher_off.checked)
     { 
            // you can set the value for off as default by set valirable in it
            var val = swticher.value = "0";
            alert('off -> '+val); 
      }  
   }

<!-- i dont know this is the right answer but i use this way somethings -->
<div class="col-sm-2">
    <input type="radio" id="swticher-on" name="swticher" value="1" class="form-control swticher-in" onclick="check(this)">
     <label for="swticher-on">ON</label>
</div>  
                                          
<div class="col-sm-2">
      <input type="radio" id="swticher-off" name="swticher" value="0" class="form-control swticher-in" checked onclick="check(this)">
      <label for="swticher-off"><b class="text-danger">OFF</b></label>
</div>

【讨论】：

您能否为您的答案添加解释？