如果验证成功隐藏提交按钮并显示加载图像

Question

I have a form to submit data in to a database through mysql php. I am using validation to check if the fields have values or not. Now I want if validation successful on submit button, hide the submit button and show loading image till the time user do not go to submission successful page.

Validation code is working fine. But problem is in hiding submit and showing loading image.

Validation Code :

    $('.msf-form form').on('submit', function(e){ 
    $(".loading").show();

    $(".sbmt").hide();
    var return_val = true;
    console.log('test');

    $(this).find('.is_mobile:visible').each(function() {                                       
        if( $(this).val() == "" ) {
            return_val = false;
            $(this).focus().css('border','1px solid #F44336');
            $(".error-messages-mobile").text("Your valid Mobile Number is required ").fadeIn();
        }
        else{
           $(this).css('border','0px solid #F44336');
           $(".error-messages-mobile").empty().fadeOut();
        }
    });

    $(this).find('.is_otp:visible').each(function() {
        if( $(this).val() == "" ) {
            return_val = false;
            $(this).focus().css('border','1px solid #F44336');
            $(".error-messages-otp").text("OTP is required ").fadeIn();
        }
        console.log(return_val);

        if(return_val == true){
            return_val = false;
            var data = {
                countryCode: $('#hiddenCode').val(),
                mobileNumber: $('#hiddenNumber').val(),
                oneTimePassword: $('#oneTimePassword').val()
              };
            $.ajax({
                url: 'test.com',
                type: 'POST',
                data: data,
                success: function (response) {console.log(response);
                  if (response == 'NUMBER VERIFIED SUCCESSFULLY') {
                        $(".error-messages-votp").empty().fadeOut();
                        $('.msf-form form').unbind('submit');
                        $('.msf-form form').submit();

                        return true;

                  }
                  else
                  {
                        return_val = false;
                        $(this).focus().css('border','1px solid #F44336');
                        $(".error-messages-otp").text("Enter valid OTP ").fadeIn();
                  }
                },
                error: function (jqXHR, textStatus, ex) { return_val = false;
                  console.log(textStatus + "," + ex + "," + jqXHR.responseText);
                }
            });
        }
    }); 

    if(!return_val){
        $(".loading").hide();
        $(".sbmt").show(); 
        return return_val;
    } 
});

Style for loading div :

Code :

<style>
    .loading{
  display:none;
  color:#FF0000;
}
</style>

Html and PHP Form Code:

I have two inputs mobile number and OTP. I want if two of them have values then hide submit button on click and show loading image.

<input type="text" name="number" placeholder="Enter Mobile number" id="number" class="is_mobile" ><br />

<input type="hidden" name="country_code" id="country_code" class="is_vcountrycode" value="91" ><br>

<span class="error-messages-mobile" id="error"></span><br>

<div id="verifyOtpForm" >

    <input type="text" name="oneTimePassword" placeholder="Enter OTP" id="oneTimePassword" class="is_otp"><br><br>
    <span class="error-messages-otp" id="error"></span><br>
    <input type="hidden" name="hiddenCode" id="hiddenCode">
    <input type="hidden" name="hiddenNumber" id="hiddenNumber"><br>
</div>
</div>
<button type="submit" class="btn sbmt">Submit</button>
<div class="loading" style="font-size:22px;"><img src="images/loading1.gif"></div>  

Answer 1

You have to put

if(!return_val){
    $(".loading").hide();
    $(".sbmt").show(); 
    return return_val;
} 

Code in AJAX success and error function.

This code gets executed before AJAX call respond. So try putting it in success and error block.