Gender validation not working right

[SMode55]

I wrote this script for my validation page.I used javascript and jquery mixed it all up. For some reason when I submit the gender validation doesnt work right, it keeps asking to validate but every other condition works. What I've pasted below is just the gender condition and the "if everything goes right to submit the page" condition, this is all included in a function ( function validate )

   if($('.sex').not(':checked'))     //check if gender is checked****************************************************************
{

    $('.gender_txt').css("background-color","yellow")   
    $("#gender_error").html("Please select your gender").css("background-color","red").css( "text-align","center").fadeIn("slow");

    $("#error_notice").html("Please fill in the red fields you missed above ").css("background-color","red").css( "text-align","center" )
    .fadeIn("slow");

    $('.sex').click(function()

{   $('.gender_txt').css("background-color","#B9BFAB"); 

  });
  } 


    if (( user_value.length > 5) && (allow_char.test(user_value)) && (pass_value.length > 5) && (allow_char.test(pass_value)) && 
    (pass_value == pass2_value) && (letters.test(fname_value)) && (letters.test(lname_value)) && ($('.sex').is(':checked'))
    ((e_value.indexOf('@') != -1) || (e_value.indexOf('.') != -1)))




{   
$('#registerForm').submit();


}

     }

[radow]

What exactly don't work?
Don't execute first condition or a another condition

[AleMonteiro]

Try $('.sex').is(':checked')

[SMode55]

   if ($('input[name=sex]:checked').length==0)     //check if gender is checked****************************************************************
{

    $('.gender_txt').css("background-color","yellow")   
    $("#gender_error").html("Please select your gender").css("background-color","red").css( "text-align","center").fadeIn("slow");

    $("#error_notice").html("Please fill in the red fields you missed above ").css("background-color","red").css( "text-align","center" )
    .fadeIn("slow");

    $('.sex').click(function()

{   $('.gender_txt').css("background-color","#B9BFAB"); 

  });
  }; 



            if (( user_value.length > 5) && (allow_char.test(user_value)) && (pass_value.length > 5) && (allow_char.test(pass_value)) && 
    (pass_value == pass2_value) && (letters.test(fname_value)) && (letters.test(lname_value)) && ($('input[name=sex]:checked').length !==0)&&
    (e_value.indexOf('@') != -1) && (e_value.indexOf('.') != -1))




{   
$('#registerForm').submit();


} 
     }

I've changed the gender condition to ($('input[name=sex]:checked').length==0) but it does the same thing which is basically when i push submit it just keeps validating the gender field ( telling me to choose a gender ) and won't submit the page even if the gender is chosen.

[AleMonteiro]

A doubt, the input sex is of what kind? A checkbox, radio button?

[SMode55]

Thanks for the reply, hold on a second, I don't understand , in the first line

if ($('input[name=sex]:checked').length==0)  

I check to see if the radio checkboxes were not checked , if they are not, I give the user an error color the fields etc..

then in the latter part of the code

         if (( user_value.length > 5) && (allow_char.test(user_value)) && (pass_value.length > 5) && (allow_char.test(pass_value)) &&
        (pass_value == pass2_value) && (letters.test(fname_value)) && (letters.test(lname_value)) &&



      ($('input[name=sex]:checked').length !==0) //right here i check to see if the radio buttons were checkd in which I think the value shouln't be equal to 0



   &&
        (e_value.indexOf('@') != -1) && (e_value.indexOf('.') != -1))
        {
        $('#registerForm').submit();

I separated it above, I check to see if the box was checked , if it was, then I submit the pagebut it keeps acting like the boxes weren't checked even if they were.

[AleMonteiro]

Are you using checkbox? With checkbox the user will be able to selected more than one sex.
Isn't radio button that you need?

[SMode55]

Radio i'll post the html

<form name="rform" autocomplete="off" id = "registerForm" method="post"  onsubmit='checkform();return false;' action="registration_complete.php" >

and just the gender html

<td class="form_row"> <p>
      <label>
         <p class="gender_txt"><input type="radio" class ="sex" name="sex0" value="male" id="sex_0" />
       Male</p></label>
      <label>
        <p class="gender_txt"> <input type="radio" class ="sex" name="sex1" value="female" id="sex_1" />
       Female</p></label>
 </td>

[SMode55]

actually ill post the whole thing it don't bother me

the html:

<legend>&nbsp;&nbsp; <h2>Registration </h2>&nbsp;&nbsp;  </legend>
<table width="500" align="left" cellpadding="0" cellspacing="1" id="registration_table">

<form name="rform" autocomplete="off" id = "registerForm" method="post"  onsubmit='checkform();return false;' action="registration_complete.php" >

  <tr>
    <td class="reg_row" id="username_row">&nbsp;Username</td>
    <td class="form_row">&nbsp;<input type="text" name="username" id="username" class ="required" onblur="checkuser();"  size="20" maxlength="50"  placeholder="Username"  /></td>
  </tr>

   <tr class="hidden_row">
    <td></td>
    <td class="errors" id="username_error"></td>
  </tr>

  <tr>
    <td class="reg_row">&nbsp;Password</td>
    <td class="form_row">&nbsp;<input class='passwords' type="password" name="password" id="password" class ="required" size="20" maxlength="50"  placeholder="Password"/></td>
  </tr>

    <tr class="hidden_row">
    <td> </td>
    <td class="errors" id="pass_error"></td>
  </tr>

  <tr>
    <td class="reg_row">&nbsp;Repeat Password</td>
    <td class="form_row">&nbsp;<input  class='passwords' type="password"  name="password2" id="password2" class ="required" equalTo="#password" size="20" maxlength="50" placeholder="Password"  /></td>
  </tr>

   <tr class="hidden_row">
    <td></td>
    <td class="errors" id="pass2_error"></td>
  </tr>

  <tr>
    <td class=reg_row>&nbsp;First Name</td>
    <td class="form_row">&nbsp;<input  type="text" name="fname" id="fname" class ="required" size="20" maxlength="50" placeholder="First Name"</td>
  </tr>

   <tr class="hidden_row">
    <td></td>
    <td class= "errors" id="fname_error"></td>
  </tr>

  <tr>
    <td class=reg_row>&nbsp;Last Name</td>
    <td class=form_row>&nbsp;<input  type="text" name="lname" id="lname" class ="required" size="20" maxlength="50" placeholder="Last Name" /></td>
  </tr>

    <tr class="hidden_row">
    <td></td>
    <td  class= "errors" id="lname_error"></td>
  </tr>

  <tr>
    <td class="reg_row" >&nbsp;Email</td>
    <td class="form_row">&nbsp;<input  type="text" name="email" id="email" size="20" maxlength="50" placeholder="Email" /></td>
  </tr>

  <tr class="hidden_row">
    <td></td>
    <td  class= "errors" id="email_error"></td>
  </tr>

  <tr>
    <td class=reg_row>&nbsp;Gender</td>
    <td class="form_row"> <p>
      <label>
         <p class="gender_txt"><input type="radio" class ="sex" name="sex0" value="male" id="sex_0" />
       Male</p></label>
      <label>
        <p class="gender_txt"> <input type="radio" class ="sex" name="sex1" value="female" id="sex_1" />
       Female</p></label>
 </td>
  </tr>

  <tr class="hidden_row">
    <td></td>
    <td class= "errors" id="gender_error"></td>
  </tr>

  <tr>
    <td class="reg_row">&nbsp;Date of Birth</td>
    <td class="form_row">&nbsp;


    <?php 
    echo'<select name = "month">
  <option>January</option>
  <option>February</option>
  <option>March</option>
  <option>April</option>
  <option>May</option>
  <option>June</option>
  <option>July</option>
  <option>August</option>
  <option>September</option>
  <option>November</option>
  <option>December</option>
</select>' ;

    echo'</select>';

    echo'&nbsp<select class="dob" name="days">';
    foreach ($days as $value)
    {echo "<option value\"value\">
    $value</option>\n";
    }
    echo'</select>';

    echo'&nbsp<select class="dob" name="years">';
    foreach ($years as $value)
    {echo "<option value\"value\">
    $value</option>\n";

        }
    echo'</select>';








    ?></td>
  </tr>

  <tr class="hidden_row">
    <td class=hide_me id=birth_row>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>

  <tr>
    <td class="reg_row" >&nbsp;Country</td>
    <td class="form_row">&nbsp;<?php echo '<select id ="countryddl" name="country">';
    foreach ($countries as $key => $value)
    { echo  "<option value= \"$key\">
    $value</option>\n";}
     echo '</select>';
    ?>
    </td>
  </tr>

  <tr class="hidden_row">
    <td class="hide_me" id_country_row>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>

  <tr>
    <td class="reg_row">&nbsp;City</td>
    <td class="form_row">&nbsp;<input type="text" name = "city" id="city_field" class ="required" size="20" maxlength="50" placeholder="City" /></td>
    <td>&nbsp;</td>
  </tr>

   <tr class="hidden_row">
    <td class="hide_me" id="city_row">&nbsp;</td>
    <td>&nbsp </td>  
    </tr>

   <tr id = "hide_state">
    <td class="reg_row"  >&nbsp; State</td>
    <td class="form_row">&nbsp;<?php echo '<select class="required" name="state">';
    foreach ($states as $key => $value)
    { echo  "<option value= \"$key\">
   $value</option>\n";}
   echo '</select>';?><br/></td>
  </tr>

   <tr class="hidden_row">
    <td class="hide_me" id="state_row">&nbsp;</td>
    <td></td>
  </tr>

  <tr>
    <td class="reg_row">&nbsp;I agree to the terms of service</td>
    <td class="form_row"><p align left>&nbsp; <input name="agree_box" type="checkbox"  value="checked" /></p>
    </td>
  </tr>

   <tr class="hidden_row">
    <td class=hide_me id=state_row>&nbsp;</td>
    <td></td>
  </tr>

  <tr>
    <td class="reg_row" ><p class="errors" id="error_notice"></p></td>
    <td class="form_row"><p align="left"><input type="submit" name="submit" id="submit" class="required value" value=" Submit Info "/></p></td>


    </p></td>
  </tr>
  </form>
</table>
</fieldset>

And the JavaScript:

     function checkform() {

var user_value = document.getElementById('username').value;
var allow_char = /^[\w ]+$/;
var letters = /^[A-Za-z]/; 
var pass_value = document.getElementById('password').value;
var pass2_value = document.getElementById('password2').value;
var fname_value = document.getElementById('fname').value;
var lname_value = document.getElementById('lname').value;
var e_value =document.forms["registerForm"]["email"].value;
var gender = document.getElementsByName('sex');







if (user_value.length < 5 ) //check if username input is less than 5 chars
{   
    $('#username').css("background-color","yellow") ;
    $("#username_error").html("Username has to be a minimum of 5 characters").css("background-color","red").css( "text-align","center").fadeIn("slow");

    $("#error_notice").html("Please fill in the red fields you missed above ").css("background-color","red").css( "text-align","center" )
.fadeIn("slow");
$('#username').click(function()

{   $(this).css("background-color","white");
  });
}



if (!allow_char.test(user_value)) //check user input for legal chars******************************************************************
{

    $('#username').css("background-color","yellow") ;
    $("#username_error").html("Only letters and numbers allowed").css("background-color","red").css( "text-align","center").fadeIn("slow");

    $("#error_notice").html("Please fill in the red fields you missed above ").css("background-color","red").css( "text-align","center" )
.fadeIn("slow");
    $('#username').click(function()

{   $(this).css("background-color","white");
  });   


    }









if  (pass_value.length < 5) //check if user password is less than 5 chars*************************************************************************

    {
    $('#password').css("background-color","yellow") 
    $("#pass_error").html("Password has to be a minimum of 5 characters").css("background-color","red").css( "text-align","center").fadeIn("slow");

    $("#error_notice").html("Please fill in the red fields you missed above ").css("background-color","red").css( "text-align","center" )
.fadeIn("slow");


    $('#password').click(function()

{   $(this).css("background-color","white");
  });

    }










if (!allow_char.test(pass_value)) //check password for legal chars************************************************************************
{

    $('#password').css("background-color","yellow")
    $("#pass_error").html("Only letters and numbers allowed").css("background-color","red").css( "text-align","center").fadeIn("slow");

    $("#error_notice").html("Please fill in the red fields you missed above ").css("background-color","red").css( "text-align","center" )
.fadeIn("slow");

     $('#password').click(function()

{   $(this).css("background-color","white");
  });   

    }









if (pass_value !== pass2_value) //check if passwords match****************************************************************************

    {
    $('.passwords').css("background-color","yellow")    
    $("#pass2_error").html("Passwords do not match").css("background-color","red").css( "text-align","center").fadeIn("slow");

    $("#error_notice").html("Please fill in the red fields you missed above ").css("background-color","red").css( "text-align","center" )
.fadeIn("slow");
     $('.passwords').click(function()

{   $(this).css("background-color","white");
  });

    }








if (!letters.test(fname_value)) //check user input for legal chars in first name**********************************************************************
{

    $('#fname').css("background-color","yellow")
    $("#fname_error").html("Name must contain only letters").css("background-color","red").css( "text-align","center").fadeIn("slow");

    $("#error_notice").html("Please fill in the red fields you missed above ").css("background-color","red").css( "text-align","center" )
    .fadeIn("slow");
    $('#fname').click(function()

{   $(this).css("background-color","white");
  });




    }





if (!letters.test(lname_value)) //check user input for legal chars in last name**********************************************************************
{

    $('#lname').css("background-color","yellow")
    $("#lname_error").html("Name must contain only letters").css("background-color","red").css( "text-align","center").fadeIn("slow");

    $("#error_notice").html("Please fill in the red fields you missed above ").css("background-color","red").css( "text-align","center" )
    .fadeIn("slow");
    $('#lname').click(function()

{   $(this).css("background-color","white");
  });

    }





if ((e_value.indexOf('@') == -1)||(e_value.indexOf('.') == -1)) //check for legal chars in email*********************************************************



    {
    $('#email').css("background-color","yellow")    
    $("#email_error").html("Please type a valid email").css("background-color","red").css( "text-align","center").fadeIn("slow");

    $("#error_notice").html("Please fill in the red fields you missed above ").css("background-color","red").css( "text-align","center" )
    .fadeIn("slow");

    $('#email').click(function()

{   $(this).css("background-color","white");
  });
    }






if( $('input[name=sex]:checked').length ==0 )    //check if gender is checked****************************************************************
{

    $('.gender_txt').css("background-color","yellow")   
    $("#gender_error").html("Please select your gender").css("background-color","red").css( "text-align","center").fadeIn("slow");

    $("#error_notice").html("Please fill in the red fields you missed above ").css("background-color","red").css( "text-align","center" )
    .fadeIn("slow");

    $('.sex').click(function()

{   $('.gender_txt').css("background-color","#B9BFAB"); 

  });
  }; 





            if (( user_value.length > 5) && (allow_char.test(user_value)) && (pass_value.length > 5) && (allow_char.test(pass_value)) && 
    (pass_value == pass2_value) && (letters.test(fname_value)) && (letters.test(lname_value)) && ( $('input[name=sex]:checked').length !==0 )&&
    (e_value.indexOf('@') != -1) && (e_value.indexOf('.') != -1))




{   
$('#registerForm').submit();


} 
     }

[AleMonteiro]

Your problem is that your radio buttons have different names. A group of radio buttons are defined by the radios name.

Check this example:

<html>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

    <script>
        $(function(){
            $("#btnCheck").click(function(){
                alert("Selected Value: " + $("input[name=sex]:checked").val());
            });
        });
    </script>

    <body>
        <input type="radio" name="sex" value="M" /> Male
        <input type="radio" name="sex" value="F" /> Female
        <button type="button" id="btnCheck">Check It</button>
    </body>
</html>

Another thing, posting the full source is not a good idea. Not because you may not like it, but because the number of people with patience and good will to read all of it is very low. I mean, the bigger the code you post, fewer people will read.

[SMode55]

Thanks for the help

[AleMonteiro]

You are welcome.

If that's it, mark as solved please.