0

您好，我一直在尝试使此表单无法正常工作，因此，如果 textarea 为空并且未选择任何单选按钮，则提交时会为两者发送一条消息，如果 textarea 有文本但未选择收音机 trow第二条消息，如果正在选择单选按钮但 textarea 为空，则显示第三条消息，最后一条消息，如果两个 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 语句逻辑有点多余，它只允许选择一个单选按钮，因为您忘记在第三个“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 回答