Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New Coder
    Join Date
    Mar 2011
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Validate radio button with jquery?

    Hi there,

    I am totally new to jquery and did manage to design a form and check fields on values (with a little help) with jquery. Now i also have 2 radio button options (gender), and at least 1 need to be checked. So i would like to validate this too before the form will be sent.

    Here is my validation now, without the radio funtion:
    Code:
      //ckeck if inputs aren't empty
    		var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;  
            var fields = $('#first_step input[type=text], #first_step textarea');
            var error = 0;
            fields.each(function(){
                var value = $(this).val();
                  if( value.length<1 || value==field_values[$(this).attr('id')] || ( $(this).attr('id')=='Email' && !emailPattern.test(value) ) ) {
                    $(this).addClass('error');
                         
                    error++;
                } else {
                    $(this).addClass('valid');
                }
            });  
    
    		//check radio buttons
    Here my radio buttons check

    Does anybody know how to check if someone has filled in their gender? My radio group name ="gender". Furthermore if no radio button has been selected I would (really) like that the text within the spans, below, lights up red:

    Code:
    <div><label><span>Male</span><input type="radio" name="gender" id="Male" /><span>Female</span><input type="radio" name="gender" id="Female" /></label></div>
    If someone could help me out with this, u would really make my day! Tried a lot, but can't figure it out..
    Thanks a lot for your time.
    Kind regards,
    Robbert
    Last edited by wzshop; 03-09-2011 at 11:00 PM.

  • #2
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    I'm not sure why you want to use jquery to perform a basic function like check if a radio button is checked.

    If you don't have to use jquery maybe use this as a guide to validating radio buttons.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <title></title>
            <script type="text/javascript">
                function validateForm() {
                    var oBtnsGender = document.getElementsByName('radGender');
                    var isGenderChecked = false;
                    for(i=0; i < oBtnsGender.length; i++){
                        if(oBtnsGender[i].checked){
                            isGenderChecked = true;
                            i = oBtnsGender.length;
                        }
                    }
                    if(!isGenderChecked) {alert('Please select a gender');}
                    return isGenderChecked;
                }
            </script>
        </head>
        <body>
            <form action="#" method="post" onsubmit="return validateForm();">
                <input type="radio" name="radGender" value="m" />Male<br />
                <input type="radio" name="radGender" value="f" />Female<br />
                <input type="submit" value="Submit" />
            </form>
        </body>
    </html>

  • #3
    New Coder
    Join Date
    Mar 2011
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts
    hi thanks a lot for your comment.
    The thing is that i use a 2 steps jquery form and this validation that i gave you was built in the script. Though there was not a radio button validation.

    Furthermore i do not really want to show up an alert message when no radio button is selected, but would really like to light up the text "male" "female" to light up red.

    To be honest, i have no idea where to start i did already manage to built in a simple button check with a javascript alert when nothing is filled in. But i have no idea how to built in the "lighting-up" thing..

    Hope you can help me further..
    Thanks again!

  • #4
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    ok, this now changes the male/female texts to red if no radio buttons are checked.

    Regarding
    i have no idea where to start
    maybe consider working through the w3schools tutorials to pickup up the basics.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <title></title>
            <script type="text/javascript">
                function validateForm() {
                    var oBtnsGender = document.getElementsByName('radGender');
                    var isGenderChecked = false;
                    for(i=0; i < oBtnsGender.length; i++){
                        if(oBtnsGender[i].checked){
                            isGenderChecked = true;
                            i = oBtnsGender.length;
                        }
                    }
                    if(!isGenderChecked) {
                        for(i=0; i < oBtnsGender.length; i++){
                            oBtnsGender[i].nextSibling.style.color = 'red';
                        }
                    }
                    return isGenderChecked;
                }
            </script>
        </head>
        <body>
            <form action="#" method="post" onsubmit="return validateForm();">
                <input type="radio" name="radGender" value="m" /><span>Male</span><br />
                <input type="radio" name="radGender" value="f" /><span>Female</span><br />
                <input type="submit" value="Submit" />
            </form>
        </body>
    </html>

  • Users who have thanked bullant for this post:

    wzshop (03-14-2011)

  • #5
    New Coder
    Join Date
    Mar 2011
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts
    thanks a lot! that helped me out

  • #6
    New Coder
    Join Date
    Mar 2011
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts
    one more question
    What if i want to add one radio check more(from another radio group) to this validation? In my form people can select a preference for a certain day and time, which looks like this:
    Code:
    Please select a day and time <table><td class="thdeen">Day1</td>
                                    <td><input type="radio" id="timepreference1" name="timepreference" /></td>
                                    <td><input type="radio" id="timepreference2" name="timepreference" /></td>
                                    <td><input type="radio" id="timepreference3" name="timepreference" /></td>
                                    <td><input type="radio" id="timepreference4" name="timepreference" /></td>
                                    <td><input type="radio" id="timepreference5" name="timepreference" /></td>
                                    <td><input type="radio" id="timepreference6" name="timepreference" /></td></tr>
    and so on. Now, if no radio button is selected i would like the text "Please select a day and time" to light up red. The somewhat edited validation script is as follows:
    Code:
    //first send the form
        $('#submit_second').click(function(){
    
    //first: radio check not empty
    var error = 0;
    var oBtnsGender = document.getElementsByName('Partbedrijf');
                    var isGenderChecked = false;
                    for(i=0; i < oBtnsGender.length; i++){
                        if(oBtnsGender[i].checked){
                            isGenderChecked = true;
                            i = oBtnsGender.length;
                        }
                    }
                    if(!isGenderChecked) {
                        for(i=0; i < oBtnsGender.length; i++){
                            oBtnsGender[i].previousSibling.style.color = 'red';
    						
    						error++;
                        }
    					
    				} else {
    						for(i=0; i < oBtnsGender.length; i++){
                            oBtnsGender[i].previousSibling.style.color = '#636363';
    					}
                    }

    How to add the above mentioned check? Thans a lot for all yr time!
    Kind regards, Robbert
    Last edited by wzshop; 03-11-2011 at 09:44 AM.

  • #7
    New Coder
    Join Date
    Mar 2011
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts
    anyone pls?

  • #8
    New Coder
    Join Date
    Mar 2011
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts
    found it already here is the code for anyone to use:

    Code:
    <span id="jopo" class="jopo">Welke dag en dagdeel hebben uw voorkeur?</span>
    
    followed by lots of radio inputs;)
    Code:
    var oBtnsGender = document.getElementsByName('timepreference');
                    var isGenderChecked = false;
                    for(i=0; i < oBtnsGender.length; i++){
                        if(oBtnsGender[i].checked){
                            isGenderChecked = true;
                            i = oBtnsGender.length;
                        }
                    }
                    if(!isGenderChecked) {
                       jopo.style.color = 'red';
    						
    						error++;
                        
    					
    				} else {
    						jopo.style.color = '#636363';
    					
                    }


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •