Question

对于下面验证功能中的性别单选按钮验证，只要没有选择性别单选按钮，就会发出警报。但是，每当＆＃34; ok＆＃34;在浏览器中选择，表单已提交。什么似乎导致了这个问题？

，如果可能的话，我希望它在返回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>

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

我做了这个＆amp;验证工作正常。

Answer 2

只提供性别默认值。

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

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

Answer 3

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

也许改变：

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

到

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

Answer 4

我会根据不同的ID选择男性和女性，并按照ElPedro的建议调用验证功能。

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

Answer 6

不知道这是否是正确的答案，但是我使用了这种方式，在一切之后，我将变量值作为我定义的愿望传递给表单：）

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>

单选按钮验证错误

6 个答案: