0

こんにちは私はこのフォームをうまく機能させようとしていました。したがって、テキストエリアが空でラジオボタンのいずれかが選択されていない場合、テキストエリアにテキストが含まれているがラジオが選択されていない場合は、両方のメッセージを送信してください。 2番目のメッセージ（ラジオボタンが選択されているがtextareaが空の場合）は3番目のメッセージを表示し、最後に両方のtextareaにテキストがあり、ラジオボタンが選択されている場合は成功メッセージを表示します。

これは私の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>

これは私の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');
                        }
                });
            });
4

2 に答える 2

1

あなたの if ステートメントのロジックは一種の冗長であり、3 番目の「if」の前に「else」を追加するのを忘れたため、ラジオ ボタンしか選択できませんでした。しかし、これを行うためのより良い方法があり、これも拡張可能です。

$(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');
                    }

            });
        });​

動作することを示すリンクを次に示します: http://jsfiddle.net/66CHS/

于 2012-08-03T06:14:23.127 に答える
0

条件に論理エラーがありますif:

現在、次のようになります。

if($('#myform textarea').val()=="")
{
    .... 
}
else if($('#myform textarea').val()=="") {  
    ....
}

ifと同様に同じ条件がありますelse if-これは、else ifが決してトリガーされないことを意味します。

次のようになります。

if($('#myform textarea').val()=="" && !$(":radio:checked").attr('checked')) {
  // no text and no radio
}
else if($('#myform textarea').val()=="") {
  // no text
}
else if(!$(":radio:checked").attr('checked')) {
  // no radio
}
else {
  // all good
}
于 2012-08-03T06:12:44.697 に答える