이러한 종류의 작업이 포함 된 형식 :
<form action="email.php">
실제 행동 :
원하는 행동 :
제출 버튼을 클릭하면 어떻게됩니까?
Fancybox와 마찬가지로 유효성 검사만으로도 괜찮습니다. 그러나 2는 함께 작동하지 않습니다.
$(document).ready(function() {
$(".fancybox").fancybox(); // initializing
$('#contactForm').validate({
submitHandler: function (form) {
$.post('/email.php', $('form').serialize());
$(".popover").fancybox({
maxWidth : 800,
maxHeight : 600,
fitToView : false,
width : '70%',
height : '50%',
autoSize : false,
closeClick : false,
openEffect : 'none',
closeEffect : 'none'
});
jQuery('.popover').trigger('click');
}
});
});
HTML
<button type="submit" class="btn btn-block popover" href="#successMessage" >Submit</button>
추신 : StackOverflow 에서 유효성 검사 를 통해이 특정 사례를 찾지 못했습니다.
이렇게 할 수는 없습니다. $(".popover").fancybox({validation 내부 에서 트리거 submitHandler: function ()하면 별도로 실행 fancybox하고 validation코딩해야합니다.
$(".fancybox").fancybox();fancybox트리거 제거jQuery('.popover').trigger('click');submitHandler: function ()class="popover"및 href="#successMessage"양식 제출 버튼fancybox및 validation코드 분리$.post('/email.php', $('form').serialize());내부에서 Ajax 메서드를 처리합니다 submitHandler: function ().fancyboxAjax가 성공적으로 호출 한 후 트리거$(".fancybox").trigger('click');다음 예제는 팝업 내에서 fancybox 및 양식 유효성 검사를 트리거하는 방법과 유효성 검사가 유효한 경우 Ajax 메서드 및 호출을 처리하는 위치에 대한 아이디어를 제공합니다.
$(document).ready(function () {
// initializing
$('.fancybox').fancybox({
maxWidth: 800,
maxHeight: 600,
fitToView: false,
width: '70%',
height: '90%',
autoSize: false,
closeClick: false,
openEffect: 'none',
closeEffect: 'none'
});
$('#contactForm').validate({
rules: {
name: {
required: true
},
email: {
required: true,
email: true
}
},
messages: {
name: {
required: "Please enter your full name."
},
email: {
required: "Please enter your email address."
}
},
submitHandler: function (form) {
//Handle Ajax Method and success / error here
$(".fancybox").trigger('click');
}
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.14.0/jquery.validate.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.css" />
//Contact Form with validation
<div class="centered-wrap">
<form class="form-horizontal" role="form" id="contactForm">
<div class="form-group">
<label class="col-sm-2 control-label" for="email">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" name="email" id="email" placeholder="Email" />
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="name">Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="name" name="name" placeholder="Name" />
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</div>
</form>
</div>
//Message inside FancyBox
<div class="fancybox" style="display: none;">Confirmation message </div>이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다