Проверка формы JQUERY не работает должным образом

Question

В принципе, когда я печатаю текстовое поле или текстовое поле, диапазон должен показываться до тех пор, пока не будут сделаны критерии.

Только если все три подтверждены, кнопка «Сохранить»() будет отображаться().

однако все, что происходит в первые два 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 s не их 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