单选按钮验证错误

Question

For the gender radio button validation within the validate function below, the alert occurs whenever neither of the gender radio buttons are selected. However, whenever "ok" is selected within the browser, the form is submitted. What seems to be causing that problem? Also I would like for it to be focused like the rest when returned false, if that is possible.

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

I've figured out the solution. Instead of having:

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

It should be:

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

I did this & the validation is working perfectly.

Answer 2

Just provide a default for gender.

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

This will avoid any possible confusion and requires less validation overall.

Answer 3

You are defining your validate() function but I don't see you actually calling it when you submit the document. A submit input on it's own does not know about your validation.

Maybe change:

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

to

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

Answer 4

我会根据不同的ID进行选择，将其分别命名为雄性和雌性，然后按照ElPedro的建议调用validate函数。

Answer 5

I think it was issue with the focus function. I made few changes and it worked.

<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

dont know if is the right answer but i uses that way and after evething i pass the variable value as my defined wish and passes to the form :)

 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>