所以我有First_Name、Last_Name、城市和电子邮件的表单。我需要检查字段是否为空。
目前，在点击提交后，它从这里重定向到GetFbId.php，我有5个值要插入数据库：FB_Id、First_Name，Last_Name、城市和电子邮件
Form.html
<!DOCTYPE html>
<html>
<head>
<title>Registracija</title>
<meta name="robots" content="noindex, nofollow">
<!-- include css file here-->
<link rel="stylesheet" href="css/style.css"/>
<!-- include JavaScript file here-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="js/registration.js"></script>
</head>
<body>
<div class="container">
<div class="main">
<form class="form" method="post" action="#">
<h2>Registracijos forma</h2><hr/>
<label>First Name: </label>
<input type="text" name="first_name" id="first_name" required>
<label>Last Name: </label>
<input type="text" name="last_name" id="last_name" required>
<label>City: </label>
<input type="text" name="city" id="city" required>
<label>Email: </label>
<input type="text" name="email" id="email" required>
<input type="submit" name="register" id="register" value="Register">
</form>
</div>
</div>
</body>
</html>
正如你现在看到的，它有action="GetFbId.php"。我有JS脚本来检查它，但它对我不起作用。JS被称为：registration.js
我在Form.html中，在<head>中包含以下标签：
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="js/registration.js"></script>
我尝试使用action="#">而不是action="GetFbId.php">，但在这种情况下，单击提交按钮后什么也没发生。
registration.js*看起来像：
$(document).ready(function(){
$("#register").click(function(){
var first_name = $("#first_name").val();
var last_name = $("#last_name").val();
var city = $("#city").val();
var email = $("#email").val();
if( first_name =='' || last_name =='' || email =='' || city =='')
{
alert("Fill all fields.");
}
else if((first_name.length)<3)
{
alert("Too short first name.");
}
else if((last_name.length)<4)
{
alert("Too short last name.");
}
else
{
$.post("GetFbId.php",{first_name: first_name, last_name: last_name, city: city, email: email},
function(data) {
if(data=='Success')
{
$("form")[0].reset();
}
alert(data);
});
}
});
});
在GetFbId.php中，我试图获得以下变量：
$first_name = $_POST['first_name'];
$last_name = $_POST['last_name'];
$city = $_POST['city'];
$email = $_POST['email'];
但当点击提交按钮时并没有任何操作（什么都并没有发生）。你知道怎么修吗？
您需要阻止默认的提交操作。否则，无论您在JavaScript中做什么，单击按钮都会提交表单。您的脚本既验证输入，又使用jQuery的.post（），因此您需要使用来防止默认的提交操作
event.preventDefault();
我还建议在验证失败时返回false。
更新的JavaScript:
$(document).ready(function () {
$("#register").click(function () {
event.preventDefault(); // <-- ADDED THIS LINE
var first_name = $("#first_name").val();
var last_name = $("#last_name").val();
var city = $("#city").val();
var email = $("#email").val();
if (first_name == '' || last_name == '' || email == '' || city == '') {
alert("Fill all fields.");
return false; // <-- ADDED THIS LINE
} else if ((first_name.length) < 3) {
alert("Too short first name.");
return false; // <-- ADDED THIS LINE
} else if ((last_name.length) < 4) {
alert("Too short last name.");
return false; // <-- ADDED THIS LINE
} else {
$.post("GetFbId.php", {
first_name: first_name,
last_name: last_name,
city: city,
email: email
},
function (data) {
if (data == 'Success') {
$("form")[0].reset();
}
alert(data);
});
}
});
});
请参阅演示：http://jsfiddle.net/BenjaminRay/n6jqvrra/
您还可以通过在必填字段中添加"required"，让浏览器为您处理必填字段验证。那么您只需要处理$.post（）方面的问题。然而，这并不是所有旧浏览器都支持的（例如IE8），因此不能保证阻止表单以空值提交。
例如：
<input type="text" name="first_name" id="first_name" required>
当然，您还需要在服务器端（PHP）验证输入。
在表单中添加一个ID：
<form class="form" id="form_id" method="post" action="GetFbId.php">
现在，不要在#register上捕获click事件，而是尝试捕获形式为的submit事件。
$('#form_id').submit(function(evt) { // Better to use a form id
// First, avoid the form being submitted normally (forms change the website from which they are submitted)
evt.preventDefault();
// Now do your form checking...
});
所以你的代码看起来像：
HTML
<form class="form" method="post" action="GetFbId.php" id="form_id">
<h2>Registration</h2><hr/>
<label>First Name: </label>
<input type="text" name="first_name" id="first_name">
<label>Last Name: </label>
<input type="text" name="last_name" id="last_name">
<label>City: </label>
<input type="text" name="city" id="city">
<label>Email: </label>
<input type="text" name="email" id="email">
<input type="submit" name="register" id="register" value="Register">
</form>
注册.js
$(document).ready(function(){
$("#form_id").submit(function(){ // Note the "submit" event OF THE FORM
var $form = $(this); // Save the context of the form
event.preventDefault(); // Prevent the form from being submitted normally
var first_name = $( '#first_name' ).val();
var last_name = $( '#last_name' ).val();
var city = $( '#city' ).val();
var email = $( '#email' ).val();
if (
first_name.length == 0
||
last_name.length == 0
||
email.length == 0
||
city.length == 0
)
{
alert('All fields are required.');
}
else if ( first_name.length < 3 ) alert('First name is too short');
else if ( last_name.length < 4 ) alert('Last name is too short');
else
{
$.post( "GetFbId.php", $form.serialize() )
.done(function(data) {
alert(data); // Print what the server returns
})
.fail(function() {
alert('An error has occured');
})
;
}
});
});