试图在基金会论坛上发布此消息，但由于某些原因无法发布。
下面的第一个代码片段显示了使用data-abide="ajax"和.on('valid.fndtn.abide',function(){});的表单的工作代码。元素被禁用等，模态打开。当模态关闭时，我仍然留在页面上。
我现在正在尝试使用AJAX，其中请求将是一个php脚本处理数据插入，元素操作和模式将成功发生。
第二个代码片段显示了该尝试，但没有成功。当我运行这段代码时，警报被触发，但随后页面提交，没有向控制台写入任何内容，没有模式，页面刷新。我做错了什么?
我还包含了部分代码(第三个片段)，用于表单和模态。
如果有人有一个使用Foundation, data-abide="ajax"和reveal-modal的工作示例，其中表单被提交，ajax调用是向PHP脚本插入数据到DB，并在成功的模态窗口打开，请提供一个样本。
代码片段1 - works
<script type="text/javascript">
$(document).ready(function () {
$("#pledge_btn").attr("disabled", true);
$(document).foundation({
abide: {
validate_on: 'manual',
patterns: {
edu_address: /.edu$/
}
}
});
$('a.custom-close-reveal-modal').click(function(){
$('#emailModal').foundation('reveal', 'close');
});
$('#pledge_form')
.on('invalid.fndtn.abide', function() {
$("#pledge_btn").attr("disabled", true);
$("#terms").prop("checked",false);
console.log('Not Submitted');
})
.on('valid.fndtn.abide', function() {
$("#pledge_form :input").prop('readonly', true);
$("#pledge_btn").attr("disabled", true);
$("#terms").attr("disabled", true);
$("#sweeps").attr("disabled", true);
console.log('Submitted: ', data);
$('#myModal').foundation('reveal', 'open');
});
});
代码片段2 -不工作
<script type="text/javascript">
$(document).ready(function () {
$("#pledge_btn").attr("disabled", true);
$(document).foundation({
abide: {
validate_on: 'manual',
patterns: {
edu_address: /.edu$/
}
}
});
$('a.custom-close-reveal-modal').click(function(){
$('#emailModal').foundation('reveal', 'close');
});
$('#pledge_form')
.on('invalid.fndtn.abide', function() {
$("#pledge_btn").attr("disabled", true);
$("#terms").prop("checked",false);
alert("Form NOT submitted");
})
.on('valid.fndtn.abide', function() {
var lname = $("#lName").val();
var dataString = 'lname=' + lname;
alert("Form submitted");
$.ajax({
url : create_pledge.php,
type : $(this).attr('method'),
data : dataString,
success : function( data ) {
$("#pledge_form :input").prop('readonly', true);
$("#pledge_btn").attr("disabled", true);
$("#terms").attr("disabled", true);
$("#sweeps").attr("disabled", true);
console.log('Submitted: ', data);
$('#myModal').foundation('reveal', 'open');
},
error : function( data, xhr, err ) {
console.log('Oops: ', data, xhr , err);
}
});
return false;
});
});
</script>
部分形式和模态代码
<div class="row pledge-row">
<form data-abide="ajax" id="pledge_form" method="post" name="pledge_form">
<div class="row">
<div class="large-6 medium-12 columns">
<label class="pledge-label">First Name*</label>
<input id="fName" type="text" required pattern="[a-zA-Z]+"/>
<small class="error">First Name is required</small>
</div>
</div>
<div class="row">
<div class="large-6 medium-12 columns">
<label class="pledge-label">Last Name*</label>
<input id="lName" type="text" required pattern="[a-zA-Z]+"/>
<small class="error">Last Name is required</small>
</div>
</div>
<div class="row">
<div class="large-6 medium-12 columns">
<label class="pledge-label">Email*</label>
<input id="email" type="email" required style="margin:0 0 5px 0 !important;"/>
<small class="error">.edu email address is required</small>
<span id="email-result"></span>
<div class="valid-email">(must be a properly formatted .edu email)</div>
</div>
</div>
<!-- CODE REMOVED FOR THIS POST -->
</form>
</div>
<!-- Modal -->
<div id="myModal" class="reveal-modal" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog">
<h2 id="modalTitle">Thanks for pledging.</h2>
<p>please check your email for our confirmation/validation email.</p>
<a class="close-reveal-modal" aria-label="Close">×</a>
</div>
找到答案了。我需要在提交中包含ajax请求，而不是有效的事件。
$('#pledge_form')
.on('invalid.fndtn.abide', function() {
$("#pledge_btn").attr("disabled", true);
$("#terms").prop("checked",false);
// alert("Form NOT submitted");
})
.on('valid.fndtn.abide', function() {
// alert("Form submitted");
console.log('VALID');
})
.on('submit', function(e) {
var ajaxObj = $.ajax({
url : 'create_pledge.php',
type : $(this).attr('method'),
data : $(this).serialize(),
success : function( ) {
$("#pledge_form :input").prop('readonly', true);
$("#pledge_btn").attr("disabled", true);
$("#terms").attr("disabled", true);
$("#sweeps").attr("disabled", true);
console.log('Submitted');
$('#myModal').foundation('reveal', 'open');
},
error : function( xhr, err ) {
console.log('Oops: ', xhr , err);
},
complete: function(){
console.log('COMPLETE');
}
});
});
});
我也有同样的问题与fanybox和ajax检查前提交。
这是我的解决方案，工作的肯定
<form id="my_form" action="...." method="POST" class="popup" data-abide="ajax">
<input type="text" name="check_this_field_with_ajax" id="check_this_field_with_ajax">
....
</form>
<script type="text/javascript" src="..../js/foundation.min.js"></script>
<script type="text/javascript" src="..../js/foundation/foundation.abide.js"></script>
<script type="text/javascript">
$('#my_form')
.on('invalid.fndtn.abide', function() {
console.log('NOT Submitted');
})
.on('valid.fndtn.abide', function() {
console.log('VALID');
})
.on('submit', function(e) {
var ajaxRequest = $.ajax({
type: 'GET',
url: "....",
data: {xxx: yyy},
cache: false,
dataType: 'json',
});
....
ajaxRequest.done(function() {
if (ok) {
$('#check_this_field_with_ajax').parent().removeClass('error');
$('#my_form').attr({'submit_this_form': 'yes'});
$(document).foundation('abide', 'reflow');
$('#my_form').trigger('submit.fndtn.abide');
}
});
}
</script>
现在进入in foundation.abide.js，搜索行" validate : function (els, e, is_ajax) { "并添加:
if (
is_ajax &&
form.attr('submit_this_form') === 'yes'
) {
return true;
}
if (is_ajax) {
return false;
}