我使用Jquery和Ajax向php页面提交包含text input
和file input
的表单,但在提交之前,我想在提交之前验证文本输入。< / p>
以下是表单页面
<form id="registrationForm" method="POST" name="registrationForm" enctype="multipart/form-data">
<input type="text" name="firstName" id="firstName" />
<input type="file" name="file" id="file" />
<button type="submit"> UPLOAD</button>
</form>
和Javascript页面
$('#registrationForm').validate({
rules: {
firstName:{
required: true
}
},
message:{
firstName: {
required: "Please Enter Name"
}
},
submitHandler : function(){
//grab all form data
var formData = new FormData(this);
$.ajax({
url: 'submitPage.php',
type: 'POST',
data: formData,
async: false,
cache: false,
contentType: false,
processData: false,
success: function(data) {
$('#message').html(data);
$('#message').html(data).hide().fadeIn(1500,function(){$('#message')});
}
});
}
});
PHP页面是接收页面
<?php
$firstName=$_POST['firstName'];
$file=$_FILES['file']['name'];
echo $firstName;
echo $file;
?>
这在php接收页面上返回null。我真的希望有人可以帮助我。感谢。
答案 0 :(得分:1)
$('#registrationForm').validate({
rules: {
firstName:{
required: true
}
},
message:{
firstName: {
required: "Please Enter Name"
}
},
submitHandler : function(){
//grab all form data
var formData = new FormData(document.querySelector("form"));
$.ajax({
url: 'submitPage.php',
type: 'POST',
data: formData,
async: false,
cache: false,
contentType: false,
processData: false,
success: function(data) {
$('#message').html(data);
$('#message').html(data).hide().fadeIn(1500,function(){$('#message')});
}
});
}
});