javascript - jQuery Ajax验证不起作用

我的网站上有一个查询页面，我在上面使用jquery ajax验证。

我的代码是：

<script>
                    function sendContact() {
                        var valid;
                        valid = validateContact();
                        if(valid) {
                            jQuery.ajax({
                            url: "contact-post.php",
                            data:'userName='+$("#userName").val()+'&userEmail='+$("#userEmail").val()+'&subject='+$("#subject").val()+'&contentsub='+$("#contentsub").val(),
                            type: "POST",
                            success:function(data){
                            $("#mail-status").html(data);
                            },
                            error:function (){}
                            });
                        }
                    }

                    function validateContact() {
                        var valid = true;
                        $(".textbox").css('background-color','');
                        $(".error").html('');

                        if(!$("#userEmail").val()) {
                            $("#userEmail-info").html("(required)");
                            $("#userEmail").css('background-color','#D2434E');
                            valid = false;
                        }
                        if(!$("#contentsub").val()) {
                            $("#content-info").html("(required)");
                            $("#contentsub").css('background-color','#D2434E');
                            valid = false;
                        }
                        return valid;
                    }
                    </script>
                 <div class="contact-form" id="frmContact">
                   <h2>Contact Us</h2>
                     <div id="mail-status"></div>
                     <div class="left_form">
                        <div>
                            <span><label>NAME</label></span>
                            <span><input name="userName" id="userName" type="text" class="textbox"></span>
                        </div>
                        <div>
                            <span><label>E-MAIL  <span class='error' id="userEmail-info" style="color:#C40401;text-align:center;margin-bottom:5px;"></span><font color="#C40401">*</font></label></span>
                            <span><input name="userEmail" id="userEmail" type="text" class="textbox"></span>
                        </div>
                        <div>
                            <span><label>PHONE</label></span>
                            <span><input name="subject" id="subject" type="text" class="textbox"></span>
                        </div>
                    </div>
                    <div class="right_form">
                        <div>
                            <span><label>SUBJECT  <span class='error' id="content-info" style="color:#C40401;text-align:center;margin-bottom:5px;"></span><font color="#C40401">*</font></label></span>
                            <span><textarea name="contentsub" id="contentsub"> </textarea></span>
                        </div>
                        <div id="submit">
                            <span><input type="submit" name="submit" value="Submit" class="myButton" onClick="sendContact();"></span>
                        </div>
                    </div>

                    <div class="clearfix"></div>
              </div>

我的问题是，当我单击没有任何值的按钮时，它将仅显示E-MAIL的错误消息（必填），而不显示SUBJECT，这是怎么回事？

最佳答案

这是因为您的textarea声明上有一个空格

<textarea name="contentsub" id="contentsub"> </textarea>
--------------------------------------------^

因此长度等于一。

您可以删除空格以解决问题

<textarea name="contentsub" id="contentsub"></textarea>

演示：

if(!$("#contentsub").val())
    document.write('KO');

if(!$("#contentsub2").val())
    document.write('OK');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea name="contentsub" id="contentsub"> </textarea>
<textarea name="contentsub" id="contentsub2"></textarea>