jquery ajax validation not working

Question

У меня есть одна страница справки на моем сайте, и я использую проверку 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 и не ПРЕДМЕТ, как это случилось?

Answer 1

Это потому, что у вас есть пустое место на вашем TEXTAREA декларации

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

Таким образом, длина равна единице.

Вы можете удалить пустое пространство, чтобы исправить неполадку

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

Demo:

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>

Answer 2

function sendContact() { 
 
         var valid; 
 
         valid = validateContact(); 
 
         if(valid) { 
 
          alert("valid data"); 
 
         } 
 
         else{ 
 
          alert("invalid data"); 
 
          } 
 
        } 
 

 
        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($.trim($("#contentsub").val()).length == 0) { 
 
          $("#content-info").html("(required)"); 
 
          $("#contentsub").css('background-color','#D2434E'); 
 
          valid = false; 
 
         } 
 
         return valid; 
 
        }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></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>

Вместо:

if(!$("#contentsub").val()) 

Можете ли вы попробовать:

if($.trim($("#contentsub").val()).length == 0)