單選按鈕驗證錯誤

Question

對於以下驗證功能中的性別單選按鈕驗證，只要未選擇任何一個性別單選按鈕，就會發出警報。 但是，只要在瀏覽器中選擇“確定”，就會提交表單。 似乎是什么引起了這個問題？ 如果可能的話，我也希望它在返回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;
   }

我這樣做了，驗證工作正常。

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的建議調用validate函數。

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>