所以我有包含名字、姓氏、城市和电子邮件的表格。我需要检查字段是否不为空。
目前，点击“提交”后，它会重定向到 GetFbId.php从这里我有 5 个值要插入到数据库中:FB_Id、First_Name、Last_Name、City 和 电子邮件
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="GetFbId.php">我尝试使用 action="#"> ，但在这种情况下，单击提交按钮后什么也没有发生。
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/
您还可以通过在必填字段中添加“必填”，让浏览器为您处理必填字段验证。然后你只需要处理 $.post() 方面的事情。但是，并非所有旧浏览器(例如 IE8)都支持此功能，因此不能保证阻止表单以空值提交。
例如:
<input type="text" name="first_name" id="first_name" required>
当然，您还需要验证服务器端 (PHP) 的输入。
关于javascript - HTML。如何检查用户是否在表单中输入了文本？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29233682/