必要なフィールドが空白の場合は、ポップアップを開かない

Question

私は送信ボタンを押すと、プライバシーポリシーを読むことを確認するためのポップアップが表示される連絡フォームがあります。
今のところ、フォームは空の必須フィールドがある場合は何も送信しませんが、ポップアップを開きます。
まだ完了するために必要なフィールドがある場合は、ポップアップが開くのを防ぐ必要があります。 http://jsfiddle.net/2BgdD/12/
おかげでたくさん：

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

はあなたがテストするには、次のフィドルを使用することができます。
は、ここでは、コードです。

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

Answer 2

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