Check if all form fields are filled and than show pop-up with Jquery-CodePudding

I have a contact form on my site and I want to show pop-up, when user clicks on submit button.

I've tried to run some jQuery code, but now pop-up shows when only one input is filled, and other ones are empty. How do I loop through all of the inputs and show pop-up, when all of them are filled?

$('#send-request-btn').click(function() {
  $('.text-field-wrapper input').each(function() {
    if ($(this).val().length === 0) {
      // Do nothing
    } else {
      $(".form-popup-wrapper").css({
        display: 'flex',
        opacity: '1.0'
      });
      $("body").css("overflow", "hidden");
    }
  });
});

CodePudding user response：

Set flag and depends upon that flag show hide your pop-up. In example I am breaking the loop if one of the input field is empty.

Example:

$('#send-request-btn').click(function() {

  $('.text-field-wrapper input').each(function() {
    $(".form-popup-wrapper").hide();
    var flag = true;
    if ($(this).val().length === 0) {
      // Do nothing
      var flag = false;
      return false;
    } else if (flag) {

      $(".form-popup-wrapper").css({
        display: 'flex',
        opacity: '1.0'
      });
      //$("body").css("overflow", "hidden");
    }
  });
});

.form-popup-wrapper {
  display: none
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
  <input type="text"></input>
  </br>
  <input type="text"></input>
  <div/>

  <div >show me</div>
  <button id="send-request-btn">Request</button>