I am currently working on a contact form where, upon clicking the send button, a popup appears to confirm that the privacy policy has been read. The form does not submit if there are any empty required fields, but the popup still appears. I need to modify the code to prevent the popup from appearing if there are unfilled required fields.
$('#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>You can access the test fiddle here: http://jsfiddle.net/2BgdD/12/
Thank you!