Jqueryフォームのエラーチェックが機能しない

Question

これは私のフォームでエラーをチェックするためのjqueryコードです。これは、長さチェックを含むか、またはフィールドが空であるかどうかをチェックします。最後に、すべてのフィールドが塗りつぶされ、目的の長さになっているかどうかをチェックします。しかし、私はすべてのフィールドを空にしておいてから、それを提出しようとしていますが、それは提出するフォームを制限しません。助けてください。

$(document).ready(function(){ 


    $('#title-error').hide(); 
    $('#decription-error').hide(); 
    $('#tags-error').hide(); 
    $('#price-error').hide(); 
    $('#name-error').hide(); 
    $('#contact-error').hide(); 
    $('#city-error').hide(); 
    $('#address-error').hide(); 
    $('#purpose-error').hide(); 

    var pictureError = false; 
    var titleError = false; 
    var categoryError = false; 
    var subCategoryError = false; 
    var decriptionError = false; 
    var tagsError = false; 
    var nameError = false; 
    var contactError = false; 
    var cityError = false; 
    var addressError = false; 
    var purposeError = false; 
    var priceError = false; 




    $('#book-title').focusout(function(){ 
     check_title(); 
    }); 


    $('#book-decription').focusout(function(){ 
     check_decription(); 
    }); 

    $('#book-tags').focusout(function(){ 
     check_tags(); 
    }); 

    $('#book-price').focusout(function(){ 
     check_price(); 
    }); 


    $('#seller-name').focusout(function(){ 
     check_name(); 
    }); 

    $('#seller-contact').focusout(function(){ 
     check_contact(); 
    }); 

    $('#seller-city').focusout(function(){ 
     check_city(); 
    }); 

    $('#seller-address').focusout(function(){ 
     check_address(); 
    }); 


    function check_title(){ 

     var titleLength = $('#book-title').val().length; 

     if(!titleLength){ 
      $('#title-error').html("*Title can't be empty.") 
      $('#title-error').show(); 
      var titleError = true; 
     } 
     else if(titleLength < 5 || titleLength > 100){ 
      $('#title-error').html("*Should be between 5-100 characters"); 
      $('#title-error').show(); 
      var titleError = true; 
     } 

     else{ 
      $('#title-error').hide(); 
     } 

    } 


    function check_decription(){ 

     var decriptionLength = $('#book-decription').val().length; 

     if(!decriptionLength){ 
      $('#decription-error').html("*Decription can't be empty."); 
      $('#decription-error').show(); 
      var decriptionError = true; 
     } 

     else{ 
      $('#decription-error').hide(); 
     } 

    } 

    function check_tags(){ 

     var tagsLength = $('#book-tags').val().length; 

     if(!tagsLength){ 
      $('#tags-error').html("*Please put some tags"); 
      $('#tags-error').show(); 
      var tagsError = true; 
     } 

     else{ 
      $('#tags-error').hide(); 
     } 

    } 


    function check_price(){ 

     var priceLength = $('#book-price').val().length; 
     var price = $('#book-price').val(); 

     if(!priceLength){ 
      $('#price-error').html("*Price can't be empty"); 
      $('#price-error').show(); 
      var priceError = true; 
     } 

     else if(!price.match(/^\d+$/)) { 
      $('#price-error').html("*Price must contain digits"); 
      $('#price-error').show(); 
      var priceError = true; 

     } 

     else if(priceLength > 5){ 
      $('#price-error').html("*Please put a reasonable price"); 
      $('#price-error').show(); 
      var priceError = true; 
     } 

     else{ 
      $('#price-error').hide(); 
     } 

    } 

    function check_name(){ 

     var nameLength = $('#seller-name').val().length; 

     if(!nameLength){ 
      $('#name-error').html("*Name can't be empty"); 
      $('#name-error').show(); 
      var nameError = true; 
     } 

     else if(nameLength > 50){ 
      $('#name-error').html("*Should be less then 50 characters"); 
      $('#name-error').show(); 
      var nameError = true; 
     } 

     else{ 
      $('#name-error').hide(); 
     } 

    } 

    function check_contact(){ 

     var contactLength = $('#seller-contact').val().length; 
     var phone = $('#seller-contact').val(); 

     if(!contactLength){ 
      $('#contact-error').html("*Contact can't be empty"); 
      $('#contact-error').show(); 
      var contactError = true; 
     } 

     else if(!phone.match(/^\d+$/)) { 
      $('#contact-error').html("*Contact must contain digits"); 
      $('#contact-error').show(); 
      var contactError = true; 

     } 
     else if(contactLength != 10){ 
      $('#contact-error').html("*Contact must be 10 digits long"); 
      $('#contact-error').show(); 
      var contactError = true; 
     } 

     else{ 
      $('#contact-error').hide(); 
     } 

    } 

    function check_price(){ 

     var priceLength = $('#book-price').val().length; 

     if(!priceLength){ 
      $('#price-error').html("*Price can't be empty"); 
      $('#price-error').show(); 
      var priceError = true; 
     } 

     else if(priceLength > 5){ 
      $('#price-error').html("*Please put a reasonable price"); 
      $('#price-error').show(); 
      var priceError = true; 
     } 

     else{ 
      $('#price-error').hide(); 
     } 

    } 

    function check_city(){ 

     var cityLength = $('#seller-city').val().length; 

     if(!cityLength){ 
      $('#city-error').html("*City can't be empty"); 
      $('#city-error').show(); 
      var cityError = true; 
     } 

     else{ 
      $('#city-error').hide(); 
     } 

    } 

    function check_address(){ 

     var addressLength = $('#seller-address').val().length; 

     if(!addressLength){ 
      $('#address-error').html("*Address can't be empty"); 
      $('#address-error').show(); 
      var addressError = true; 
     } 

     else{ 
      $('#address-error').hide(); 
     } 

    } 



    function check_purpose(){ 

     var purposeLength = $('#book-purpose').val().length; 

     if(!purposeLength){ 
      $('#purpose-error').html("*Please choose purpose of the ad"); 
      $('#purpose-error').show(); 
      var purposeError = true; 
     } 

     else{ 
      $('#purpose-error').hide(); 
     } 

    } 



    $('#book-post-form').submit(function(){ 


    var titleError = false ; 
    var decriptionError = false ; 
    var tagsError = false ; 
    var nameError = false ; 
    var contactError = false ; 
    var cityError = false ; 
    var addressError = false ; 
    var purposeError = false ; 
    var priceError = false ; 

     check_title(); 
     check_decription(); 
     check_tags(); 
     check_price(); 
     check_name(); 
     check_contact(); 
     check_city(); 
     check_address(); 
     check_purpose(); 





     if(titleError == false && decriptionError == false && tagsError == false && nameError == false && contactError == false && cityError == false && addressError == false && purposeError == false && priceError == false){ 

      return true; 
     } 

     else{ 

      return false; 
     } 

    }); 


}); 

ここに私のHTMLマークアップです。あなたがそこに値を変更することはありませんので、

<form action="ad-post.php" method="POST" enctype="multipart/form-data" id="book-post-form" > 

          <span class="form-header">Pin a free ad</span> 

          <div class="ad-post-element"> 
          <div id="croppic"></div> 
          <div class="action-primary" id="cropContainerHeaderButton" style="margin:10px 0px 10px 0px">Upload book photo</div> 
          <span class="error" id="picture-error">&#42; Choose an appropriate title.</span> 
          <input type="text" name="book_image" id="myOutputId" style="visibility: hidden"> 

          </div> 



          <div class="ad-post-element"> 
           <label for="book-title">Title</label> 
           <input type="text" name="book-title" id="book-title"> 
           <span>&#42; Choose an appropriate title.</span> 
           <span class="error" id="title-error">&#42; Choose an appropriate title.</span> 
          </div> 

          <div class="ad-post-element"> 
           <label for="book-isbn">ISBN</label> 
           <input type="text" name="book-isbn" id="book-isbn"> 
           <span>&#42; ISBN is optional and can be leave unfilled.</span> 

          </div> 

          <div class="ad-post-element"> 
           <label for="book-category">Category</label> 
           <select name="book-category" id="book-category"> 
           <option value="0" selected disabled>Select Category</option> 

           <?php 

           foreach($cat->getCat() as $cat){       
           $name = $cat->category_name; 
           echo "<option value=".$count.">".$name."</option>"; 
           } 
           ?> 

           </select> 
           <span class="error" id="category-error">&#42; Choose an appropriate title.</span> 
          </div> 

          <div class="ad-post-element" id="hide" style="display:none"> 
           <label for="book-sub-category">Sub Category</label> 
           <select name="book-sub-category" id="book-sub-category"> 
           <option selected disabled>Select Sub Category</option> 

           </select> 
           <span class="error" id="sub-category-error">&#42; Choose an appropriate title.</span> 
          </div> 

          <div class="ad-post-element"> 
           <label for="book-purpose">Purpose</label> 
           <select name="book-purpose" id="book-purpose" required> 
            <option selected disabled>Purpose of ad</option> 
            <option value="resell">Resell</option> 
            <option value="donate">Donate</option> 
           </select> 
           <span class="error" id="purpose-error">&#42; Choose an appropriate title.</span> 
          </div> 

          <div class="ad-post-element"> 
           <label for="book-decription">Decription</label> 
           <textarea name="book-decription" id="book-decription"></textarea> 
           <span>&#42; Describe your book in few words</span> 
           <span class="error" id="decription-error">&#42; Choose an appropriate title.</span> 
          </div> 

          <div class="ad-post-element"> 
           <label for="book-tags">Tags</label> 
           <textarea name="book-tags" id="book-tags"></textarea> 
           <span>&#42; Put some tags separated by comma (,)</span> 
           <span class="error" id="tags-error">&#42; Choose an appropriate title.</span> 
          </div> 

          <div class="ad-post-element"> 
           <label for="book-price" required>Price</label> 
           <input type="text" name="book-price" id="book-price" > 
           <span class="error" id="price-error">&#42; Choose an appropriate title.</span> 
          </div> 
          </div> 

        <div class="seller-info"> 

         <span class="seller-header">Seller Details</span> 

          <div class="ad-post-element"> 
          <label for="seller-name">Name</label> 
          <input type="text" name="seller-name" id="seller-name"> 
          <span>&#42; keep it real so that people can identify you</span> 
          <span class="error" id="name-error">&#42; Choose an appropriate title.</span> 
         </div> 

          <div class="ad-post-element"> 
          <label for="seller-contact">Contact</label> 
          <input type="text" name="seller-contact" id="seller-contact"> 
          <span>&#42; keep it real so that people can contact you</span> 
          <span class="error" id="contact-error">&#42; Choose an appropriate title.</span> 
         </div> 

          <div class="ad-post-element"> 
          <label for="seller-city">City</label> 
          <input type="text" name="seller-city" id="seller-city"> 
          <span class="error" id="city-error">&#42; Choose an appropriate title.</span> 
         </div> 

          <div class="ad-post-element"> 
          <label for="seller-address">Address</label> 
          <textarea name="seller-address" id="seller-address"></textarea> 
          <span class="error" id="address-error">&#42; Choose an appropriate title.</span> 
         </div> 

        </div> 

        <input type="submit" class="action-primary" style="margin:10px 0px 10px 0px" name="submit" value="Pin free Ad" id="submit"> 
       </form> 

Answer 1

いけない機能を提出し、直接のあなたの変数に値を代入し、彼らはいつもあなたの送信関数でfalseになります。あなたは戻り値の型関数を作成し、それをsubmit関数の変数に代入することができます。

あなたは戻り値の型

var TitleError = check_title(); 

を取得するために変数を使用する関数を呼び出しているとcheck_title機能が

function check_title(){ 

    var titleLength = $('#book-title').val().length; 

    if(!titleLength){ 
     $('#title-error').html("*Title can't be empty.") 
     $('#title-error').show(); 
     var titleError = true; 
     return true; 
    } 
    else if(titleLength < 5 || titleLength > 100){ 
     $('#title-error').html("*Should be between 5-100 characters"); 
     $('#title-error').show(); 
     var titleError = true; 
     return true; 
    } 

    else{ 
     $('#title-error').hide(); 
     return false; 
    } 

} 

他人のために同じ

同様