JQUERY表單驗證無法正常工作

Question

基本上，當我鍵入textarea或textbox時，跨度應該顯示，直到制定標準。

只有當所有三個驗證都應該提交按鈕「保存」顯示（）。

但是一切事情是前兩個文本框跨度都出現了，當我開始（從對焦但不）在其中寫，但是當條件滿足

 <div id="add"> 
     <div id="close"></div> 


      <form action="" method="POST"> 
       <div id="name"> 
        Name:<span>Please Enter Full Name</span> 
        <br/> 
        <input type="text" name="name" id="textbox"> 
       </div> 
       <div id="company"> 
        Company<span>Please Enter Company Name</span> 
        <br/> 
        <input type="text" name="company" id="textbox1"> 
       </div> 
       <div id="review"> 
        Review<span>Please Enter Review</span> 
        <br/> 
        <textarea name="comment"></textarea> 
       </div> 
       <div id="save"> 
        <input type="submit" name="submit"> 
       </div> 
      </form> 
     </div> 




     //...START OF ADDBOX 
       $('span').hide(); 
       $('#save').hide(); 

       $nameText = $('#name'); 
       $companyText = $('#company'); 
       $commentText = $('#comment'); 


       function nameValid() { 
        if ($nameText.val().length < 5) { 
         $('#name span').show(); 
        } else { 
         $('#name span').hide(); 
        } 
       } 

       function companyValid() { 
        if ($companyText.val().length < 3) { 
         $('#company span').show(); 
        } else { 
         $('#company span').hide(); 
        } 
       } 

       function commentValid() { 
        if ($commentText.val().length < 1) { 
         $('#review span').show(); 
        } else { 

         $('#review span').hide(); 
        } 

       } 

       $nameText.focus(nameValid).keyup(nameValid).keyup(save); 
       $companyText.focus(companyValid).keyup(companyValid).keyup(save); 
       $commentText.focus(commentValid).keyup(commentValid).keyup(save); 


       function save() { 
        if ($commentText.val().length > 0 && $companyText.val().length > 2 && $nameText.val().length > 4) { 
         $('#save').show(); 
        } else { 
         $('#save').hide(); 
        } 


       } 

http://jsfiddle.net/opfczh69/ JS-小提琴不會消失這裏

Answer 1

您正在使用name而不是它們的id s引用您的文本框，因此它不匹配任何內容。

您需要引用它們作爲#textbox, #textbox1, #comment並給予評論框的id：

$('span').hide(); 
 
$('#save').hide(); 
 

 
$nameText = $('#textbox'); 
 
$companyText = $('#textbox1'); 
 
$commentText = $('#comment'); 
 

 

 
function nameValid() { 
 
    if ($nameText.val().length < 5) { 
 
     $('#name span').show(); 
 
    } else { 
 
     $('#name span').hide(); 
 
    } 
 
} 
 

 
function companyValid() { 
 
    if ($companyText.val().length < 3) { 
 
     $('#company span').show(); 
 
    } else { 
 
     $('#company span').hide(); 
 
    } 
 
} 
 

 
function commentValid() { 
 
    if ($commentText.val().length < 1) { 
 
     $('#review span').show(); 
 
    } else { 
 
     
 
     $('#review span').hide(); 
 
    } 
 
    
 
} 
 

 
$nameText.focus(nameValid).keyup(nameValid).keyup(save); 
 
$companyText.focus(companyValid).keyup(companyValid).keyup(save); 
 
$commentText.focus(commentValid).keyup(commentValid).keyup(save); 
 

 

 
function save() { 
 
    if ($commentText.val().length > 0 && $companyText.val().length > 2 && $nameText.val().length > 4) { 
 
     $('#save').show(); 
 
    } else { 
 
     $('#save').hide(); 
 
    } 
 
    
 
    
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<div id="add"> 
 
      <div id="close"></div> 
 
       
 
       
 
       <form action="" method="POST"> 
 
        <div id="name"> 
 
         Name:<span>Please Enter Full Name</span> 
 
         <br/> 
 
         <input type="text" name="name" id="textbox"> 
 
        </div> 
 
        <div id="company"> 
 
         Company<span>Please Enter Company Name</span> 
 
         <br/> 
 
         <input type="text" name="company" id="textbox1"> 
 
        </div> 
 
        <div id="review"> 
 
         Review<span>Please Enter Review</span> 
 
         <br/> 
 
         <textarea name="comment" id="comment"></textarea> 
 
        </div> 
 
        <div id="save"> 
 
         <input type="submit" name="submit"> 
 
        </div> 
 
       </form> 
 
      </div>

Updated Fiddle