HTML. 如何检查用户是否输入了表单中的文本?

所以 , 我有一个名为的表格

First_Name

,

Last_Name

,

City



Email

. 我需要检查字段是否不为空。

目前,单击按钮后,将其发送将其重定向到
GetFbId.php

从这里我有 5 在数据库中插入的值:

FB_Id

,

First_Name

,

Last_Name

,

City



Email


Form.html



html
<html>
<head>
<title>Registracija</title>
<meta content="noindex, nofollow" name="robots"/>
<!-- include css file here-->
<link href="css/style.css" rel="stylesheet"/>
<!-- include JavaScript file here-->
<script src="[url=http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>]http://ajax.googleapis.com/aja ... gt%3B[/url]
<script src="js/registration.js" type="text/javascript"></script>
</head>
<body>
<div class="container">
<div class="main">
<form action="#" class="form" method="post">
<h2>Registracijos forma</h2><hr/>
<label>First Name: </label>
<input id="first_name" name="first_name" required="" type="text"/>
<label>Last Name: </label>
<input id="last_name" name="last_name" required="" type="text"/>
<label>City: </label>
<input id="city" name="city" required="" type="text"/>
<label>Email: </label>
<input id="email" name="email" required="" type="text"/>
<input id="register" name="register" type="submit" value="Register"/>
</form>
</div>
</div>
</body>
</html>


正如你所看到的那样,他在他有
action="GetFbId.php"

. 我有一个脚本 JS, 检查它,但它对我不起作用。 JS 叫:
registration.js


我打开B.
Form.html

, 里面
<head>

下一个标签:


<script src="[url=http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>]http://ajax.googleapis.com/aja ... gt%3B[/url]
<script src="js/registration.js" type="text/javascript"></script>


而不是
action="GetFbId.php"&gt;

我试着用
action="#"&gt;

, 但在这种情况下,我单击“发送”按钮后没有任何反应。


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/&lt;3/
{
alert/"Too short first name."/;
}

else if//last_name.length/&lt;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'];


但没有动作 /什么都没发生/ 单击“发送”按钮时。 你有想法如何解决它吗?
</head>
已邀请:

涵秋

赞同来自:

您需要防止默认发送。 否则,不管您所做的内容如何,​​请按下按钮发送表单 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/, 因此,不保证表单不会以空值发送。

E.g.:


<input id="first_name" name="first_name" required="" type="text"/>


当然,您还需要检查服务器端的输入数据 /PHP/.

知食

赞同来自:

添加 ID 在他的形式:


<form action="GetFbId.php" class="form" id="form_id" method="post">


现在,而不是捕获这个事件
click


#register

, 尝试捕获活动
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 action="GetFbId.php" class="form" id="form_id" method="post">
<h2>Registration</h2><hr/>
<label>First Name: </label>
<input id="first_name" name="first_name" type="text"/>
<label>Last Name: </label>
<input id="last_name" name="last_name" type="text"/>
<label>City: </label>
<input id="city" name="city" type="text"/>
<label>Email: </label>
<input id="email" name="email" type="text"/>
<input id="register" name="register" type="submit" value="Register"/>
</form>


Registration.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 &lt; 3 / alert/'First name is too short'/;
else if / last_name.length &lt; 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'/;
}/
;
}
}/;
}/;


</form>

要回复问题请先登录注册