Question

Hello I have been trying to make this form work with no luck, So in submit if the textarea is empty and any of the radio button are not being selected trow a message for both, if textarea has text but a radio is not being selected trow a second message, if radio button is being selected but textarea is empty display a third message and last if both textarea has text and a radio button is being selected display a success message.

This is my html:

                <div id="main" role="main">

                <form action="?q=dt-index" method="post" name="subscribeForm" id="myform">

                    <div id="comment_holder" class="input_holder" style="position: relative;">
                        <textarea rows="6" cols="30" placeholder="Please enter text" name="comment" class="inp"></textarea>
                    </div>

                    <div class="cbox">
                        <input type="radio" name="smile_selected" value="Awesome" id="yummy1" />
                            <label for="yummy1" class="yummy">Awesome</label>
                        <input type="radio" name="smile_selected" value="Good" id="cool1" />
                            <label for="cool1" class="cool">Good</label>
                        <input type="radio" name="smile_selected" value="Okay" id="ok1" />
                            <label for="ok1" class="ok_smile">Okay</label>
                        <input type="radio" name="smile_selected" value="Yuck" id="yuck1" />
                            <label for="yuck1" class="yuck">Yuck</label>
                    </div>

                    <div id="loading_button">
                        <button type="submit" class="default">Send</button>
                    </div>

                </form>

                <div id="errors"></div> <!-- Error container -->

            </div>

This is my jQuery:

                $(document).ready(function() {


            /* on submitting my form */
                $( '#myform' ).submit(function() {

            /*          if Textarea is empty and redio button are not checked display message error for both */
                        if($('#myform textarea').val()=="")
                        {
                             if (!$(":radio:checked").attr('checked')) {
                                 $('#errors').empty().text('Please enter your message and select a radio'); 
                                return false;
                             }  
                        }

            /*          else if Textarea is empty display message error */
                        else if($('#myform textarea').val()=="") {  
                            $('#errors').empty().text('Please enter your message');
                            return false;
                    }

            /*          if radio button is not being selected display message error */
                        if (!$(":radio:checked").attr('checked')) {
                            $('#errors').empty().text('Please select a radio');
                            return false;
                    }

            /*          Everthing is good display success message and add SENDING class to submit button */
                        else {
                            $('#myform :submit').addClass('sending').html('Sending message...');
                            $('#errors').empty().text('All Good :D');
                        }
                });
            });

Answer 1

Your if statement logic is kind of redundant, and it allowed only a radio button to selected, because you forgot to add an “else” before the 3rd “if”. But here is a better way to do it, that is also expandable:

$(document).ready(function() {


        /* on submitting my form */
            $( '#myform' ).submit(function() {

               var errors = [];

        /*     else if Textarea is empty display message error */
               if($('#myform textarea').val()=="") {  
                    errors[errors.length] = 'enter your message';
                }

        /*      if radio button is not being selected display message error */
                if (!$(":radio:checked").attr('checked')) {
                   errors[errors.length] = 'select a radio';
                }

                if(errors.length > 0){
                    var errMsg = "Please  "

                    for(e = 0; e < errors.length-1; e++){
                        errMsg += errors[e]+", ";
                    }

                     errMsg = errMsg.substr(0, errMsg.length -2)+" and "+errors[errors.length-1]+".";
                     $('#errors').empty().text(errMsg);
                     return false;
                }

        /*          Everthing is good display success message and add SENDING class to submit button */
                    else {
                        $('#myform :submit').addClass('sending').html('Sending message...');
                        $('#errors').empty().text('All Good :D');
                    }

            });
        });​

Heres a link to show it works: http://jsfiddle.net/66CHS/