필수 입력란이 비어있는 경우 팝업을 열지 마십시오

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