Jquery表单错误检查不起作用

Question

这是我的 jquery 代码，用于检查表单中的错误。它包括长度检查或检查任何字段是否为空。最后，它检查是否所有字段都已填写并具有预期的长度。但是，虽然我将所有字段都留空并尝试提交 from 它并不限制表单提交。请帮忙。

$(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

不要在提交函数中直接将值分配给您的变量，它们在您的提交函数中总是错误的，因为您永远不会更改那里的值。您可以创建一个返回类型函数，然后将它们分配给提交函数中的变量。

在提交函数中调用函数时使用变量获取返回类型

  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;
    }

}

其他人也一样