Ajax表单提交+引导验证程序正在工作.现在"数据未定义”;错误
Ajax form submit + Bootstrap validator was working. Now "data is not defined" error
在夏天的时候，我花了几个星期的时间试图弄清楚引导验证器加上ajax提交表单。我终于把它弄好了，只是让表格有一段时间没有完成。
我三天前测试了表格，结果很好。我四处移动了一些文件，但我认为与表单无关，现在它突然不起作用了。我不记得对表单文件做过任何更改。事实上，我有一个链接，链接到我以前在stackoverflow上处理这个表单的时候，你可以看到我的JS没有改变！
引导验证器将整个表单标记为红色，即使某些字段是正确的
在验证了字段并提交后，我现在得到了"Uncaught ReferenceError:data is not defined"这在几天前还很好！
我很确定JS代码中有几个问题，但我不确定从哪里开始解决这个问题。我想我也有一些裁员。。。
这是一个链接到我的网站和表格。从那里你可以测试它，并看到我得到的数据错误。目前唯一需要的字段是Name，只是为了加快测试速度。
http://www.chelseaporter.com/APSoPC/adoptForm.php
JS代码：
$(document).ready(function () {
var validator = $("#adoption-form").bootstrapValidator({
//live: 'disabled',
feedbackIcons: {
valid: "glyphicon glyphicon-ok",
invalid: "glyphicon glyphicon-remove",
validating: "glyphicon glyphicon-refresh"
},
fields : {
name :{
validators : {
notEmpty : {
message : "Please provide your name."
},
stringLength: {
min : 4,
max: 35,
message: "Name must be between 4 and 35 characters long"
},
}//end validators
},
email :{
validators : {
notEmpty : {
message : "Please provide an email address"
},
regexp: {
regexp: '^[^@''s]+@([^@''s]+''.)+[^@''s]+$',
message: 'The value is not a valid email address'
}
}//end validators
},
//LOTS MORE VALIDATORS IN HERE
} //end ALL validators
});
validator.on("success.form.bv", function (e) {
if (data.fv.getInvalidFields().length > 0) { // There is invalid field
data.fv.disableSubmitButtons(true);
}
e.preventDefault();
$("#adoption-form").addClass("hidden");
$("#confirmation").removeClass("hidden");
var $form = $(e.target),
fv = $form.data('bootstrapValidator');
});
//process the form
$("#adoption-form").submit(function(event) {
// get the form data
// there are many ways to get this data using jQuery (you can use the class or id also)
var formData = {
'name' : $('input[name=name]').val(),
'email' : $('input[name=email]').val(),
'address' : $('input[name=address]').val(),
'city' : $('input[name=city]').val(),
'state' : $('select[name=state]').val(),
'zip' : $('input[name=zip]').val(),
'years' : $('input[name=years]').val(),
'hPhone' : $('input[name=hPhone]').val(),
'altPhone' : $('input[name=altPhone]').val(),
'dNumber' : $('input[name=dNumber]').val(),
'dState' : $('input[name=dState]').val(),
'employer' : $('input[name=employer]').val(),
'ePhone' : $('input[name=ePhone]').val(),
'hType' : $('select[name=hType]').val(),
'hStatus' : $('select[name=hStatus]').val(),
'lName' : $('input[name=lName]').val(),
'LNumber' : $('input[name=LNumber]').val(),
'student' : $('select[name=student]').val(),
'sName' : $('input[name=sName]').val()
};
// process the form
$.ajax({
type : 'POST', // define the type of HTTP verb we want to use (POST for our form)
url : 'process.php', // the url where we want to POST
data : formData, // our data object
dataType : 'json', // what type of data do we expect back from the server
encode : true
})
// using the done promise callback
.done(function(data) {
// log data to the console so we can see
console.log(data);
console.log(formData);
});
// stop the form from submitting the normal way and refreshing the page
event.preventDefault();
console.log(formData);
});
});
Process.php代码
<?php
// process.php
$errors = array(); // array to hold validation errors
$data = array(); // array to pass back data
$body = implode("'n", $array);
$name = $_POST['name'];
$email = $_POST['email'];
$address = $_POST['address'];
$city = $_POST['city'];
$state= $_POST['state'];
$zip = $_POST['zip'];
$years = $_POST['years'];
$hPhone = $_POST['hPhone'];
$altPhone = $_POST['altPhone'];
$dState = $_POST['dState'];
$dNumber = $_POST['dNumber'];
$employer = $_POST['employer'];
$ePhone = $_POST['ePhone'];
$hType = $_POST['hType'];
$hStatus = $_POST['hStatus'];
$lName = $_POST['lName'];
$lNumber = $_POST['lNumber'];
$student = $_POST['student'];
$sName = $_POST['sName'];
//(!empty($_POST['student']) ? $_POST['student'] : null);
$to = 'mekeri@gmail.com';
$subject = "$name has sent you a message";
$from = "AdoptionApp";
//HTML headers for email
$headers = "From: $from'r'n";
$headers .= "MIME-Version: 1.0'r'n";
$headers .= "Content-Type: text/html; charset=ISO-8859-1'r'n";
//begin of HTML message
$message = <<<EOF
<html>
<body bgcolor="#99CCCC">
<table rules="all" style="border-color: #666;" cellpadding="10">
<tr style="background: #eee;"><td><strong>Name:</strong> </td><td>$name</td></tr>
<tr><td><strong>Email:</strong> </td><td>$email</td></tr>
<tr><td><strong>Address</strong> </td><td>$address</td></tr>
<tr><td><strong>City:</strong> </td><td>$city</td></tr>
<tr><td><strong>State:</strong> </td><td>$state</td></tr>
<tr><td><strong>Zip:</strong> </td><td>$zip</td></tr>
<tr><td><strong>Years @ Address:</strong> </td><td>$years</td></tr>
<tr><td><strong>Home Phone:</strong> </td><td>$hPhone</td></tr>
<tr><td><strong>Alternate Phone:</strong> </td><td>$altPhone</td></tr>
<tr><td><strong>Driver License Number:</strong> </td><td>$dNumber</td></tr>
<tr><td><strong>Driver License State:</strong> </td><td>$dState</td></tr>
<tr><td><strong>Employer:</strong> </td><td>$employer</td></tr>
<tr><td><strong>Employer Phone:</strong> </td><td>$ePhone</td></tr>
<tr><td><strong>Type of home</strong> </td><td>$hType</td></tr>
<tr><td><strong>Home Status</strong> </td><td>$hStatus</td></tr>
<tr><td><strong>Landlord Name</strong> </td><td>$lName</td></tr>
<tr><td><strong>Landlord Phone</strong> </td><td>$lPhone</td></tr>
<tr><td><strong>Student</strong> </td><td>$student</td></tr>
<tr><td><strong>Spouse Name</strong> </td><td>$sName</td></tr>
</table>
</body>
</html>
EOF;
//end of message
// validate the variables ======================================================
// if any of these variables don't exist, add an error to our $errors array
// if (empty($_POST['name']) & empty($_POST['email']) & empty($_POST['address']) & empty($_POST['city']) & empty($_POST['state']) & empty($_POST['zip']) & empty($_POST['years']) & empty($_POST['hPhone']) & empty($_POST['altPhone']) & empty($_POST['dNumber']) & empty($_POST['dState']) & empty($_POST['hType']) & empty($_POST['hStatus']) & empty($_POST['student']))
// $errors = 'Field is required.';
if (empty($_POST['name']))
$errors['name'] = 'name is required.';
if (empty($_POST['email']))
$errors['email'] = 'Email is required.';
if (empty($_POST['address']))
$errors['address'] = 'Address is required.';
if (empty($_POST['city']))
$errors['city'] = 'City is required.';
if (empty($_POST['state']))
$errors['state'] = 'State is required.';
if (empty($_POST['zip']))
$errors['state'] = 'Zip is required.';
if (empty($_POST['years']))
$errors['years'] = 'Years at current address is required.';
if (empty($_POST['hPhone']))
$errors['hPhone'] = 'Home phone is required.';
if (empty($_POST['dNumber']))
$errors['dNumber'] = 'Driver license number is required.';
if(empty($_POST['dState']))
$errors['dState'] = 'Driver license state is required.';
if ($_POST['hType']= "")
$errors['hType'] = 'Home Type is required.';
if ($_POST['hStatus']= "")
$errors['hStatus'] = 'hStatus is required.';
if(empty($_POST['student']))
$errors['student'] = 'student? is required.';
// return a response ===========================================================
// if there are any errors in our errors array, return a success boolean of false
if ( ! empty($errors)) {
// if there are items in our errors array, return those errors
$data['success'] = false;
$data['errors'] = $errors;
} else {
// If there are no errors, send the email
if (!$errors) {
mail($to, $subject, $message, $headers);
echo "Message has been sent....!";
}
}
// return all our data to an AJAX call
echo json_encode($data);
?>
"success.form.bv"事件实际上不返回任何数据，只返回事件。您可以在表单事件部分查看。
根据此文档，您可以通过以下方式找到"数据"：
$(e.target).data('bootstrapValidator').getInvalidFields()
我在控制台上试了一下，结果成功了。由于它变成了一个空数组，我检查了不同的方法，它们返回的正是预期的结果。
相关文章：
- 调整窗口大小时，可拖动的对象会出现在容器外部
- 铬:“;未捕获的语法错误:意外的标记:"
- 可以设置“;文件名"发生错误时显示的内联脚本标记的
- CSS-若窗口太小，滚动条会出现在“表格”单元格上
- JS表单提交"无法使用Chrome数据保护程序加载此页面.尝试重新加载页面.调试信息:POST CISmtuK
- 检测电话窃听，即:<a href="电话:xxx">在UIWebview上
- 使用“+="操作人员
- //而不是在src=“”上使用http://"属性
- "未捕获的语法错误:意外的标记｝"
- 可以<脚本类型＝“;text/javascript”>window.location=“/"</
- "实例范围”;TypeScript类的getter/setter
- Javascript复选框函数:;缺少:在属性id之后"
- "“;变量未引用正确的对象
- "日期“;AJAX请求返回的类型值未定义
- 得到"TypeError:无法读取属性'filename'未定义的“;调用“npm start
- Soundcloud api"未捕获的类型错误:无法读取属性'uri'“未定义”;
- "工具提示"jQuery插件坏了
- jQuery点击ON现在使用.load触发关闭
- "现在无法切换到旧模式“-tls.connect函数中出现Node.JS apn模块错误
- Ajax表单提交+引导验证程序正在工作.现在"数据未定义”;错误
