Question

您好我一直试图让这个表单运行没有运气，所以在提交中如果textarea是空的并且没有选择任何单选按钮，则为两者提供消息，如果textarea有文本但是收音机不是如果选择单选按钮但是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');
                        }
                });
            });

Answer 1

你的if语句逻辑是多余的，它只允许选择一个单选按钮，因为你忘了添加＆＃34; else＆＃34;在第3个之前＆＃34;如果＆＃34;。但这是一个更好的方法，也可以扩展：

$(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/

Answer 2

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
}

Jquery if和else if语句验证

2 个答案: