javascript - 如果必填字段为空，则不要打开弹出窗口

Question

我有一个联系表格，当您按下发送按钮时，会打开一个弹出窗口，要求确认阅读隐私政策。
目前，如果必填字段为空，表单不会发送任何内容，但会打开弹出窗口。
如果仍有必填字段需要完成，我需要阻止弹出窗口打开。
代码如下:

$('#myCheck').click(function() {
     $(this).toggleClass("checked");
});


(function($) {
    $.fn.toggleDisabled = function(){
        return this.each(function(){
            this.disabled = !this.disabled;
        });
    };
})(jQuery);

$('.checkz').click(function () {
    $('#invias').toggleDisabled();
    $('#invias').toggleClass("activ3");
    });
    
    
    $(".pex").click(function (e) {
    e.stopPropagation();
});

function checkInputs() {
  var isValid = true;
  $('input').filter('[required]').each(function() {
    if ($(this).val() === '') {
      $('#confirm').prop('disabled', true)
      isValid = false;
      return false;
    }
  });
  if(isValid) {$('#confirm').prop('disabled', false)}
  return isValid;
}

//Enable or disable button based on if inputs are filled or not
$('input').filter('[required]').on('keyup',function() {
checkInputs()
})

checkInputs()

.checkz {width:20px;
height:20px;
background: transparent;
background-size: contain;
border:1px solid #CCC;
border-radius:5px;
display:inline-block;
    margin-bottom: 5px;
    margin-right: 10px;} 

#invias {opacity:0.5}

.activ3 {opacity:1 !important}

#popup {
    background-color: rgba( 231, 135, 74, 0.85 );
    position: fixed;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1999999999;
    overflow: initial;
    transition: all .15s ease-in-out;
}

.pex {width:500px;padding:30px;background:#FFF;z-index:1999999999;margin: 10% auto 0;text-align: center;}

.cst {display: inline-block;
    text-align: left;}

.checked {background-image: url(https://image.flaticon.com/icons/png/512/3/3596.png)}

button:disabled {opacity:0.5 !important}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>

        function popupshow() {
            document.getElementById("popup").style = "";
            }

            function popupban() {
            document.getElementById("popup").style.display = "none";
            }
        </script>

<form method="post" name="contactform" class="peThemeContactForm">
    <div class="col-md-5 col-sm-5 col-xs-12 animated hiding" data-animation="slideInLeft">
        <div class="form-group">
            <input type="text" name="author" class="form-control input-lg" placeholder="Name*" required />
        </div>
        <div class="form-group">
            <input type="email" name="email" class="form-control input-lg" placeholder="Email*" required />
        </div>
        <div class="form-group">
            <input type="text" name="phone" class="form-control input-lg" placeholder="Phone">
        </div>
    </div>
    <div class="col-md-7 col-sm-7 col-xs-12 animated hiding" data-animation="slideInRight">
        <div class="form-group">
            <textarea name="message" class="form-control input-lg" placeholder="Message*" required ></textarea>
        </div>
    </div>
    <a onclick="popupshow()" class="btn btn-custom up animated hiding" data-animation="fadeInUpBig" id="confirm">Send message</a>

<div id="popup" style="display:none;">
<div class="pex">
<div class="checkz" id="myCheck"></div> <div class="cst">Dichiaro di aver letto, compreso ed accettato
<br>l'<a href="http://www.iwiz.it/privacy-policy" target="_blank" style="text-decoration:underline">informativa sul trattamento dei miei dati personali</a></div>
<br><br><a class="btn btn-custom" onclick="popupban()" >Close</a> <button type="submit" class="btn btn-custom" id="invias" onclick="popupban()" disabled>Accept</button>
</div>
</div>

您可以使用以下 fiddle 来测试:http://jsfiddle.net/2BgdD/12/
非常感谢。

Answer 1

如果将 isValid 设置为全局变量，则可以在触发 popupshow 方法之前使用它进行检查:

function popupshow() {
  if (!isValid) return;
  document.getElementById("popup").style = "";
}

您还需要调整您的 checkInputs 方法:

function checkInputs() {
  $('input').filter('[required]').each(function() {
    if ($(this).val() === '') {
      $('#confirm').prop('disabled', true)
      isValid = false;
    } else {
      isValid = true;
    }
  });
  if(isValid) {$('#confirm').prop('disabled', false)}
  return isValid;
}

Updated Demo